Mega menus are the most common type of menu used in any eCommerce store. They allow for a grouped display of submenus in specific categories shown in a column style layout.
Building a Mega Menu
Like any other navigation menu, mega menus are created using Shopify’s menu builder, which can be found in the Navigation tab on your Shopify dashboard.
It’s preferable that you have a good knowledge of how to create menus in Shopify, particularly nested menus. Shopify has created a useful article on this, which you can read Here.
Once a menu has been created, it becomes available to use in the customiser. The way your menu is structured is important for how your mega menu is displayed on the front end.
Start by creating a new menu, give it a name, and begin adding some top level menu items. They don’t necessarily have to link to anything for now, it’s just to get the structure in place (use # hashtags to create ‘dead’ links). For a well structured mega menu, you should have a menu that looks similar to this:
Once you have this structure in place, the menu will be available to use in the customizer. Simply select your new menu when adding a Dropdown – Mega Menu block to your navigation bar.
For more information, please read the Dropdown – Mega Menu chapter for a full list of available settings.
Mega Menu Distance
The vertical positioning of a mega menu depends on the height of both the Site Header Top and Site Header Main‘s height properties. This setting will allow you to fine-tune the vertical positioning of your mega menus.
Mega Menu Distance Sticky
This is the same setting as above, but only applies when the site header is in it’s “Sticky” state. This value is usually smaller than the above setting since it removes the Site Header Top area.
Navigation Menu Font Settings
Use these settings to customise the text used for navigation menus, including dropdown submenus and mega menus. More information on common font settings can be found in Common Block Settings.
Menu Item Spacing
This sets the amount of space between each horizontal menu item. This value is set in pixels (PX).