Mega navigation
Header
A Mega navigation menu displays menu links in multiple columns so customers can browse large catalogs quickly and easily. Add up to 3 sub-menus along with a featured image, text, and links to customize your mega nav.
Note | If you have multiple languages enabled, you need to add separate mega nav blocks for each language. After adding a mega nav block in your default language, set up Multi-lingual mega navs by using translated link names for the Dropdown parent link.
![](https://help.fluorescent.co/~gitbook/image?url=https%3A%2F%2F1086282208-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fl6iv1HA2gJCuwR5V6stX%252Fuploads%252Fgit-blob-8af17e2256b68eea09cf6393be2acbc8e1ca4d82%252Fheader-mega-nav.jpeg%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=2d3d0f8a&sv=1)
Watch video tutorial
Watch the tutorial video below for a step-by-step walkthrough to set up your mega nav menus.
1. Create nested menu list
The mega navigation menu uses the Main menu selected in the Header section settings. For the mega navigation, you first need to create a nested menu with 3 levels of links.
We will look at the Lorenza Chic demo as an example:
![](https://help.fluorescent.co/~gitbook/image?url=https%3A%2F%2F1086282208-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fl6iv1HA2gJCuwR5V6stX%252Fuploads%252Fgit-blob-e6ecfed93b20042c043cdde628c696140a5e2a39%252Fheader-mega-columns.jpeg%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=49c6eca2&sv=1)
In the Lorenza Chic demo, the top-level link is "Shop" with three nested sub-menus. Clicking the Shop link opens the mega navigation menu.
The 2nd-level links ("Shop by type" and "Shop by color") display as titles for each column and contains the 3rd-level links to collections.
We will look at the Lorenza Chic demo as an example:
![](https://help.fluorescent.co/~gitbook/image?url=https%3A%2F%2F1086282208-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fl6iv1HA2gJCuwR5V6stX%252Fuploads%252Fgit-blob-e6ecfed93b20042c043cdde628c696140a5e2a39%252Fheader-mega-columns.jpeg%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=49c6eca2&sv=1)
In the Lorenza Chic demo, the top-level link is "Shop" with three nested sub-menus. Clicking the Shop link opens the mega navigation menu.
2. Add mega nav menus
Once you have created your nested menus, you can now add mega nav blocks to your Header in the theme editor.
Note | If you have multiple languages enabled, you need to add separate mega nav blocks for each language. After adding a mega nav block in your default language, set up Multi-lingual mega navs by using translated link names for the Dropdown parent link.
Add multi-lingual mega navs
If your store has multiple languages, you need to add separate mega nav blocks for each language, and enter the translated link name for the Dropdown parent link.
For example, if your store has 2 languages (English and German), you will need 2 mega nav blocks. For the first mega nav block, use the default language for the Dropdown parent link (e.g. "Shoes"). For the second mega nav block, use the translated link name for the Dropdown parent link (e.g. "Schuhe" for German).
Settings reference
Click on the Mega nav block to find the following settings:
Setting | Description |
---|---|
Dropdown parent link | When clicked, this top-level link activates the mega nav with sub-menus populated below. Enter the exact name of the top-level link from your main menu. |
Mega nav featured image | A feature image display within the mega nav menu. If the image is taller or wider than 4:3 (width:height), it is center-cropped and displayed as a 4:3 image. |
Featured image caption | Text displayed as a caption below the featured image. We recommend keeping this to just a few words long. |
Featured image link text | Clickable link text displayed below the featured image and caption. |
Featured image link | The page or URL used for the link text below the featured image and caption. |
Strapline text | A line of text displayed along the bottom edge of the mega nav menu. This text can include bold and italic formatting, as well as links to other URLs. |
Related links
Last updated