Header and Navigation Menu

Estimated reading: 2 minutes

With the Iris theme, you have a choice between a standard drop-down style menu, a drawer-style menu, and a mega menu. There are also various options for the header layout.

Before you start playing with various options you need to set up your first navigation menu. To do that head to Online Store ->Navigation in your store’s dashboard. To set up your first menu you need at least a few pages, products, or collections. Once you have these ready you can start adding them to your navigation menu.

Please check Shopify’s navigation menu guide to learn how to add/remove/edit items in your navigation menu.

Assign the menu

Now that you have your navigation menu ready head to the Theme Customizer > Header.

At the top, you have the Menu section where you can select the menu you created to display in your header.

When you assign your menu you can start customizing its appearance by choosing the color scheme, layout, and type.

Mega Menu

Mega menu is often the preferred option for online stores with a large inventory and a lot of collections. To switch to the mega menu go to Theme Customizer > Header and from the Desktop menu type select Mega Menu.

By default, when you select the mega menu option only menu items with 3 levels ( 2 submenu levels ) will be turned into a mega menu. The rest will be displayed as a standard drop-down menu.

To turn all menu items into mega menu style make sure to tick the Apply mega menu to all menu items checkbox. For the mega menu, you can also choose between three animation options.

Highlight a menu item

If you want to highlight a top-level menu item you can do so by adding a colored badge with text to it. First, enable highlight by ticking the Enable menu item highlight checkbox and then set the text and color for the badge.

Use the Menu item highlight position drop-down to assign the badge to the menu item you want.

Share this Doc

Header and Navigation Menu

Or copy link