NAVIGATION - Enabling and configuring mega-navigation
Those instructions are only applying to our theme Trademark. If you are looking instructions for setting-up mega-nav in another theme, please refer to the dedicated support article.
Trademark comes with a beautiful, and highly customizable menu bar. In addition to standard dropdown, Trademark allows you to display menus in a much more visual way. Here is an example from our demo store:
Please note that when this mode is used, only one level is possible. If you need two levels, you will need to stick with the standard dropdown menus.
Before setting this up, you need to know your theme's version number, as instructions are different. To know your version number, please click here and follow the instructions.
In newest version of Trademark (1.7.1 and higher), you first need to create your main menu with the desired links hierarchy. Here is what our demo store's example menu would look like:
The mega-nav in Trademark only support one level of links. Additional nested links are ignored (for instance, if you add a third level link that is the children of "Headphones", it will be ignored and not rendered).
For best results, we would recommend you to have between 3 and 5 links in the mega-nav. Also, you should need to make sure that your links within the mega-nav are only pointing to either products, collections or blog posts, because those are the only elements for which we can pull an image.
Next, open the Theme Settings, and click on the "Header" section:
Scroll to the bottom, and click on the button "Add mega-menu". Finally, simply enter the name of the main menu element that should have the mega-menu applied. In our example, because we want to have the mega-menu for the "Catalog" item, we simply need to enter "Catalog":
The first step is to configuring your main menu. The main menu is automatically created by Shopify for you, and can be edited in the Navigation section (if you are already logged to your Shopify account, simply click on this link.
In our example, this menu contains four items: "Home", "Catalog", "Blog" and "Contact Us". Obviously, you are free to have the menu items you want.
We want to create a mega-nav when hovering the "Catalog" item. As a consequence, in the Navigation section of Shopify, we will need to create a new menu that is called "Catalog".
This is important to have the exact same name as the main menu item, because the theme uses this name to make the matching. Inside this new menu, you can add several links to different items.
For best results, we recommend you to keep the number of items small (between 3 and 5 is a good trade-off). Also, you should only include links to products and/or collections. This allows the theme to retrieve the attached image.
Here is the example configuration from our demo theme:
As you can see, the name is "Catalog", and I have added three links ("Headphones", "Earphones" and "Accessories") that all redirects to a collection link.
By default, the theme will display the sub-menu using a standard dropdown menu. In order to instruct the theme to display it in the mega-nav fashion, you will need to open the Theme Settings.
In the list of sections, click on "Header":
Scroll down to the bottom, and click on the "Add mega-menu" button:
Finally, in the new block, select the menu that you've just created in the "Menu" option:
You can turn as many menus as you want into a mega-menu by clicking on the "Add mega-menu" button again.