A menu is the header of your site: the logo, the links and the switches around them. You build it with the same drag-and-drop builder you use for pages.
A menu only holds the layout. The links come from a navigation, which you show with a Menu element. Create your navigation first, then build the menu around it.
One menu can be used by many pages. Each page picks one menu and one footer.
Menus are listed in Pages and Menus, then Menus. Each menu has its own builder, where you arrange the bar and the mobile drawer.
1
Open Menus
Go to Pages and Menus, then Menus, and click Add menu.
2
Name it
Enter a Unique name and click Create menu. The menu appears in the table.
3
Open the builder
Open the menu's row actions and choose Edit content.
4
Pick a starting point
In Select Menu Template, choose a ready-made menu or Blank menu. You can switch later with Change template.
5
Save
Click Update Menu. Every save goes live on the pages that use this menu.
The Navigation category of the element picker holds the elements made for menus and footers. You can also use buttons, text and any other element.
Menu
Shows the links of one navigation. Pick it under Links.
Logo
Your site logo from the theme, linked to the home page.
Theme switch
Lets visitors pick light or dark.
Language switch
Lets visitors change the language.
Hamburger
Opens the menu drawer on small screens.
Social links
Links to your social profiles, as icons or with their names.
In the Menu element, Direction sets how the links are laid out: Horizontal, Vertical or Columns. Hide first-level icons shows the top links as text only, which suits a desktop bar.
On phones, a horizontal row of links rarely fits. The usual setup is a Hamburger in the bar that opens a drawer with the links.
1
Hide the desktop links on phones
Select the Menu element in the bar, open Responsive & Visibility and use Hide On to hide it on mobile.
2
Hide the hamburger on larger screens
Select the Hamburger and hide it on desktop and tablet.
3
Fill the drawer
Switch the builder preview to Mobile. The drawer appears below the bar. Add a Menu element there, set it to Vertical and pick the same navigation.
Keep a Logo element in the bar even if you have not uploaded a logo yet. It shows nothing until you add one in your theme, and then appears everywhere at once.
Click Menu configuration in the builder to change settings for the whole menu, such as its background, spacing and HTML tag.
Layout
Top bar puts the menu above the page. Sidebar docks it to one side.
Menu Position
Where a top bar sits as visitors scroll: in the page flow, Sticky, Fixed, Absolute or Relative.
Sticky scrolls with the page and then stays at the top. Fixed is always at the top, over the page. Absolute sits over the first section.
1
Open your pages
Go to Pages and Menus, then Pages.
2
Edit the page's menu
Open the page's row actions and choose Menu & Footer.
3
Pick and save
Choose a Menu and a Footer, then click Save Changes.
Shop pages take their menu from Shop, then Shop Configuration, in the Visibility tab. Pages the platform renders for accounts, such as subscription status pages, use the menu set in Users Onboarding under Menu and footer for account pages.
Deactivating a menu from the Menus table hides it on every page that uses it.
