# Mega menu

Install FoxTransfer Chrome Extension FREE here

A mega menu is a drop-down menu in which the top-level item has 2 levels of nested drop-down menus. A mega menu affects how shoppers discover your product offerings and other information, which lets them browse easily and seamlessly. It is a perfect design choice when building a website with multiple categories and subcategories. The design also provides sufficient space for images (banners) and other rich content.

Different websites require different kinds of menus, depending on the size, nature, and objectives of your store. This article shows you how to create and customize your own suitable menu. This article shows you how to create and add your Mega menu to Megamog theme. {% hint style="info" %} This feature requires you to install the [FoxKit All-in-one Sales Boost app](https://apps.shopify.com/foxkit?utm_source=foxecom\&utm_medium=help_center_megamog_mega_menu\&utm_campaign=anchor_text\&utm_term=foxKit_all-in-one_sales_boost_app) to your store. {% endhint %} {% hint style="success" %} **Steps:** 1. Create a **Mega menu** in **FoxKit** app. 2. Add your **Mega menu** to the theme. 3. Save. {% endhint %} ## **How to create a Mega menu in FoxKit app** ### **Create Menu** 1. Go to **Apps** > **FoxKit Sales Boost** app. 2. Select **Mega menus** feature > **Create menu**. 3. Give your new menu a **title** and select the **Menu layout** (Horizontal/Vertical). Then, click **Create menu**.

### Add and customize your Menu items and Submenu items ### Menu item settings #### General * Title: Insert your menu item label; * Link: paste the page URL you want to link the menu item with, or simply leave it blank; {% hint style="info" %} Include the full URL of that page, including the URL's HTTPS protocol. {% endhint %} * Check the option 'Open link in a new tab' if needed;

#### Submenu settings * Determine your **Submenu layout** as Mega/Dropdown; {% tabs %} {% tab title="Submenu as Mega" %}

{% endtab %} {% tab title="Submenu as Dropdown" %}

{% endtab %} {% endtabs %} * Select how the submenu is opened: by hovering/clicking; * Select the Dropdown container width: Full width/ Auto width; * Enable to show content in the container if needed; * Set the number of submenu columns: 1-6 columns or based on the number of submenu items being added to the menu item.

#### Icon & Badge settings You can add an icon and/or a badge to your menu item. {% tabs %} {% tab title="How the icon is added to the menu item" %}

{% endtab %} {% tab title="How the badge is added to the menu item" %}

{% endtab %} {% endtabs %}

#### Visibility Select in what view that menu item and submenu items are displayed.

### Submenu item settings Once you have added your menu item, you can add submenu items to it.

Then, select the type: [**Text link**](#submenu-item-as-text-link)/ [**Image banner**](#submenu-item-with-a-image-banner). #### Submenu item as Text link * Give your submenu item a label; * and Insert the link to redirect visitors to your desired page.

#### Submenu item with an Image banner After adding the menu item title and its link, you can set a banner to it. * Select/Upload an image; * Add the image banner's Heading if needed; * Give the banner a button by inserting the Button label; * Adjust the color of the text.

This is an example of a Mega menu with Image banners added to the Submenu items:

{% hint style="info" %} Do the same with other menu and submenu items. You can also add third-level items to your menu. {% endhint %}

### Menu Appearance settings Select the [**Menu layout**](#create-menu) you have set when you create the menu and start managing how your Mega menu appears on the storefront 🎨. {% tabs %} {% tab title="➡️ Horizontal menu" %}

{% endtab %} {% tab title="⬇️ Vertical menu" %}

{% endtab %} {% endtabs %} ## Add the Mega menu to the Megamog theme Once you have created a mega menu in FoxKit, go to the theme editor to display the mega menu. {% hint style="success" %} **Steps:** 1. Go to **Themes > Customize** 2. Select the **Header** section > **Mega menu** 3. Make nessary changes 4. Save {% endhint %}

Start with adding a Menu Heading to activate the feature. You can your Menu name, or any text you want. Then, select the button position as on the menu location (On menu), or above (On top). You can also set your mega menu to be opened by default (home page only).

### Add mega menu for desktop view #### 1. Inspect your Mega menu element to get the menu ID Click on the Mega menu element in the theme editor. Then, right-click on it and select **Inspect** from the menu to access the Inspect window. Once you have opened the *Inspect* window, you will see the HTML and CSS code for the web page.\ Find the code starting with: ```

In the nested code lines, find the one that starts with \