Adding different menus to the top navigation bar

Here, you will learn how to add visually appealing and informative menus to your store's navigation bar.

First, set them up under the Shopify dashboard - Content - Menus. You can add, remove, or edit menu items. The menu items are links to products, collections, webpages, blog posts, or customer account pages. View details at https://help.shopify.com/en/manual/online-store/menus-and-links/editing-menus.

Then, please move to our theme configuration. You’ll be working in the Header. Let's start.

Note: If you're running a small shop that has between five and twenty items, you can choose a small menu as the dropdown menu type. Then your website's menu structure will be simple and still enough to direct users to important pages.

Note: If you run content-rich online stores, we recommend choosing a mega menu for your website. It can contain columns with secondary submenus, banners, and many links to products, collections, webpages, articles, etc. 

Well, in the general configuration, it is possible to: 

• Specify the names of items on either the mega menu or the small menu.
• Activate the top-level menu On hover or On click.
• Enable dropdown items animation.
• Show the collection icon in the menu.
• Select the icon for the menu item and adjust the collection icon width.

In case you create the Mega menu, use the following settings to create the best menu ever:

• Set the number of main items per row. 
• Show the link Shop All and change the text for the link.
• Limit the number of categories to show.

Header section blocks

The Relax theme allows for choosing a Banner Image, Collection list, and Product list blocks to be shown in the dropdown menu for the top-level menu.

Product list block

Collection list block

Each block has an advanced configuration. 

It is easy to configure the wide range of settings, in particular:

• Remove menu links. Note: check the Remove menu links checkbox to show the Collection list and Image banner menus.
• Select collections.
• Select collection products to show in the Product list menu.
• Select collections to show in the Collection list menu.
• Set the maximum number of products to show.
• Set the items' width.
• Set the index of the parent-item menu to make the dropdown content shown under the appropriate menu item. 
• Choose the image design between Portrait and Circle.
• Choose the image position between Cover and Contain.
• Add the link to the page that will be shown after using the View All link.
• Show product price and a badge in the Product list menu.
• Show outline border.

Banner Image block

Here, it is possible to:

• Remove menu links in case you want to stay with the image only.
• Select the image for the banner.
• Set the image border radius.
• Add the image link.
• Set the index of the parent menu item. That's important if you want to show this menu under the appropriate menu item.
• Choose the color scheme for the text box.
• Choose the text vertical position between Inside top, Inside center, Inside bottom, Above, and Below.
• Choose the text horizontal position between Left, Center, and Right.
• Add the text content.
• Add the button text.
• Add a button link.
• Use secondary button style.

Note: Remember to style the header appearance in Theme Settings. There, you can also enable the hamburger menu.

You can also show both menus to improve the user experience when navigating.