NAVIGATION - Enabling and configuring Focal mega-menu

This article only applies to the theme Focal.

In addition to standard dropdowns, our theme Focal allows you to display menus in a beautiful way, called the "mega-navigation". Here is an example of how it looks like in one of our demo store:

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 Focal (5.1.1 and higher), you simply need to create the desired nested links hierarchy. Here is what our demo store's example menu would look like (for simplicity, one the first column is displayed):

You need to make sure that the link hierarchy you build start at the main menu (which is the menu called "Main Menu" by default - unless you have manually changed the menu to another one -). This means that the whole mega-menu structure requires one and only one menu (the main one).

As you can see, we have simply created links hierarchy that looks like our mega-nav. The second level ( Clothes in this example) is used as the columns name, while the third level links are the links of the given column.


Next, open the theme settings and click on the "Header" section:

Scroll down until the "Mega-navigation" sub-section. 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 "Store" item, we simply need to enter "Store":


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.


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.