The navigation bar is displayed directly below the main header bar on desktop. It shows the items from your primary and secondary menus, and supports dropdown menus and mega menus for top-level items.
On mobile, the navigation bar is replaced by a hamburger menu that opens a full-screen menu drawer.
All navigation settings are part of the Header section. To access them:
From here you can assign menus, configure the action button, and adjust the navigation bar colors. The settings are grouped by feature — see the sections below for details on each one.
The header section has three menu settings:
You can add an optional call-to-action button at the end of the navigation bar. This is useful for highlighting a link to a contact page, help center, or promotion.
You can highlight individual menu items with a custom color. This is most commonly used to make a "Sale" link stand out in red. You can add multiple blocks to highlight different menu items.
Top-level menu items can be enhanced with mega menus — rich, full-width dropdown panels that display lots of menu items in an organized way. See Mega menus for setup instructions.
On mobile, the navigation bar is hidden and replaced by a hamburger menu button in the header. Tapping it opens a full-screen menu drawer.
By default, the mobile menu uses the same menu as the desktop navigation. To show a different menu on mobile, assign a Mobile menu in the header section settings.
You can also control which additional elements appear at the bottom of the mobile menu drawer — see Mobile menu for those settings.