# Mega navigation

A **Mega navigation menu** displays menu links in multiple columns so customers can browse large catalogs quickly and easily. Add multiple sub-menus along with a featured image, text, and links to customize your mega nav.

<details>

<summary><mark style="color:blue;">Why is the mega nav not working in other languages?</mark></summary>

If you've translated your store using an app, make sure the "Parent dropdown link" name is not translated, as this will break the mega nav. See instructions below for [fixing translated mega navigations](#translating-mega-navigations).

</details>

<div data-full-width="false"><figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FSu6jQAIqph5FE3Sv5o8r%2Fmega-nav-collection-images.jpeg?alt=media&#x26;token=f4e0a6a0-fee9-4ccb-aea6-dc17b6bf69a3" alt=""><figcaption><p>Mega nav with collection images</p></figcaption></figure></div>

## Watch video tutorial

Watch the **tutorial video** below for a step-by-step walkthrough to set up your mega nav menus.

{% embed url="<https://youtu.be/QsisSKijx6Q>" %}

## 1. Create nested menu list

***

Before adding the mega menu block, you will need to create a menu with three levels of nested links.

* The **top-level** link appears in the header and opens the mega menu.
* The **2nd-level** links appear as column headings inside the mega menu.
* The **3rd-level** links appear in columns below the second-level links.

From your Shopify admin, go to **Content > Menus**. Choose a menu item to be the 'parent' or top-level link that will open the mega menu from the header. To create 2nd-level and 3rd-level links, use the drag-and-drop handles **`⋮⋮`** to move links under other links to nest them.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your **Shopify admin**:

1. Go to **Content > Menus**.
2. Select the **Main menu** or the menu you want to edit.
3. Add a top-level link (for example: "Shop") in your **Main menu** that will open the mega nav and contain the nested sub-menus.
4. Add your 2nd-level menu links and use the drag handles **`⋮⋮`** to move them under the top-level link.

   ![](https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2Fgit-blob-c08287b6adad6e4565a5cbde565d54f3bd629005%2Fheader-mega-drag.png?alt=media)

   > In the Artisan demo, the 2nd-level links are "**Shop by type**", "**Shop by occasion**", "**Shop by style**", and "**Shop by color**".
5. Add your 3rd-level menu links and use the drag handles **`⋮⋮`** to move them under the 2nd-level links.

   > In the Artisan demo, the 3rd level links are collection pages.
6. Click **Save**.

</details>

***

**We will look at our Cornerstone Artisan demo as an example:**

In the Artisan demo, the top-level link is "**Shop**" with four nested sub-menus.

The 2nd-level links ("**Shop by type**", "**Shop by occasion**", etc.) display as titles for each column and contains the 3rd-level links.

<div><figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2F7K6KXW57OWQDqe0bKlxa%2Fmega-nav-menu.png?alt=media&#x26;token=1651a64f-6eb3-4267-905f-a71d74d4b431" alt="" width="375"><figcaption></figcaption></figure> <figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FvNuoElEZ5PHdFjLLzemh%2Fmega-nav-levels.jpg?alt=media&#x26;token=6613518d-59a1-4c82-be90-474264812f57" alt=""><figcaption></figcaption></figure></div>

## 2. Add mega menu blocks

***

Once you have created your nested menus, you can now add **mega nav blocks** to your **Header** in the theme editor.

There are 5 available mega nav blocks with different styles and features.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click the arrow beside the **Header** section.
2. Click **(+) Add block** and choose either the **Compact mega menu** or **Full width mega menu**.
3. Enter the exact name of the top-level link (e.g. "Shoes") in the **Dropdown parent link** field.

   > If you have multiple languages enabled, you need to add separate mega nav blocks for each language. Duplicate the first mega nav block and enter the translated name of the top-level link for the **Dropdown parent link**. For step-by-step instructions, refer to [Multi-lingual mega navs steps](#add-multi-lingual-mega-navs).
4. Use the **Column count** display your menu lists in 1, 2, 3, or 4 columns.
5. (*For Compact menu*.) Use the **Total column width** slider to expand the total width of the mega nav and the space between the menu lists and image.
6. Choose whether to show **Column dividers**.
7. Click **Save**.

</details>

<table><thead><tr><th width="207">Block</th><th>Description</th></tr></thead><tbody><tr><td>Default</td><td>Display a basic mega nav with a custom header and menu layout.</td></tr><tr><td>Promotions</td><td>Display multiple promo areas with featured images and links to your products, collections, or other pages.</td></tr><tr><td>Collection images</td><td>Display collection images when visitors hover over collection links.</td></tr><tr><td>Promoted products</td><td>Display and link to selected products with thumbnail images.</td></tr><tr><td>Promoted collections</td><td>Display and link to selected collections with their title and image.</td></tr></tbody></table>

![](https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2Fgit-blob-6537f16fe4c7368255550f3bb74a789805b32efb%2Fmega-nav-parent.png?alt=media)

## Translating mega menus

***

When translating your theme, make sure the "Dropdown parent link" text from the mega nav settings is **not** translated.

If you've auto-translated your theme, the parent link text may have been translated, which will break the mega nav for other languages.

If you're using the [Translate & Adapt app](https://apps.shopify.com/translate-and-adapt), go to **Section groups** > **Header Group**. In the default language column, find the name used for the dropdown parent link. Delete all translations for the parent link and click **Save**.

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FiKTnLyAHzku11o5Q8mLR%2Fmega-nav-translate.gif?alt=media&#x26;token=6a49b521-ea50-4ca9-8aeb-7004e79f2416" alt="" width="563"><figcaption></figcaption></figure>

***

> **Related links**
>
> [Header](https://help.fluorescent.co/cornerstone/header/header)\
> [Layout and style](https://help.fluorescent.co/cornerstone/header/header/layout)\
> [Logo](https://help.fluorescent.co/cornerstone/header/header/logo)\
> [Transparent header](https://help.fluorescent.co/cornerstone/header/header/transparent-header)\
> [Mobile menu](https://help.fluorescent.co/cornerstone/header/mobile-menu)\
> [Search bar](https://help.fluorescent.co/cornerstone/header/search-bar)