NAVIGATION - Enabling and configuring mega-navigation

Our theme Focal comes with a neat feature called the "mega-navigation". It looks like this:

This mega-navigation allows you to create a multi-columns menu that even feature an image. Properly configuring it requires some step, so please make sure to follow them closely.

Step 1: preparing the menus

You will need first to create several menus. To do that you need to open the "Navigation" section in your Shopify admin. If you are already logged, you can  directly click here.

Different menus must be created with matching names in order to make it works. For instance, here is the configuration needed to achieve the previous result:

As you can see, we have the "Store" menu item in the main navigation, that holds our mega-nav.

The first-level links in the mega navigation are "Clothes", "Shoes" and "Accessories". As a consequence, the "Store" menu have those three links.

Finally, to create the second-level links in the mega-navigation, you simply need to create three new menus that have the same name as the first level mega-navigation items (in this case, we therefore have three menus called "Clothes", "Shoes" and "Accessories").

It's important for the naming to be the same.

Step 2: configuring the mega-navigation

Now, open the theme editor, and click on the "Header" section. You should find a sub-section called "Mega-navigation". In the "Choose menu" option, select the menu that must triggers the mega-nav in the main menu.

In our example, the menu would be the "Store" one.