Navigation

Please refer to the dedicated mega-menu article if you need help setting up the mega-menu.

Maestrooo themes offer a lot of settings allowing you to adapt the theme to your brand. This article will guide you through common customizations related to navigation.

Changing the mobile menu

Most of the time, navigation on mobile and desktop is shown differently. Mobile uses a sidebar menu, while desktop often uses a list of directly visible links.

Because of that, it might be desirable to create a different link structure to adjust it to the device. Maestrooo themes allow you to do that easily.

First, you need to create a new menu containing your mobile structure. You can learn more about how to create a menu on Shopify documentation.

Once your new menu has been created, open the theme editor, and click on the Header section:

Select your newly created menu for the "Mobile menu" setting:

If your menus are different, they won't sync automatically. This means that if you add a new menu item for the desktop menu, you will need to add it as well on the mobile menu.

Changing the desktop navigation layout

Prestige gives you access to five different navigation layouts. Each layout answers to a different use case, depending on the number of links your navigation has and the style you want to give to your store.

To change the layout, open the theme editor and click on the "Header" section:

In the list of settings, select the layout of your choice for the "Layout" setting:

The "Show icons" setting allows you to control whether the theme displays icon or plain text for the account, search, and cart links. We recommend using icons if you have a lot of links, as it helps to reduce the overall header size.

This setting does not have any effect on mobile and tablet.

Here are the different layouts.

Logo left, navigation inline

The logo is shown left in this layout, with the navigation inline. It is an ideal layout if you have between 1 to 10 links.

Logo left, navigation center

This layout is similar to the previous one but center the navigation. If you have few links, this layout better balances the empty space.

Logo center, navigation inline

This layout shows the logo at the center, with the navigation inline on the left. It is an ideal layout if you have between 1 and 5 links in your navigation. Your logo is immediately visible, which helps your customers to remember your brand. This layout is not suitable if you have a lot of links in your navigation, as links could overlap, especially on small screens.

Logo center, navigation below

This layout centers the logo and moves the links below. This is an ideal layout if you have a lot of links to show. However, this layout also creates a taller header. When using this mode, we recommend you turn off the sticky header.

Drawer

This minimalistic layout moves the navigation into a sidebar drawer, similar to the mobile experience. This layout is ideal if you have a lot of links and want to emphasize your content rather than your navigation. However, older audiences might have trouble using such a menu, so we recommend checking your analytics to decide if this layout suits your store.