NAVIGATION - Enabling and configuring mega-navigation
Trademark comes with a beautiful, and highly customizable menu bar. In addition to standard dropdown, Trademark allows you to display up to three menus in a different way. Here is an example from our demo theme:
In order to achieve this results, there are various steps you need to follow.
1) Create your main menu
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.
2) Create the sub-menu
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.
3) Enabling the mega-nav
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.