Navigation

The Navigation section is your store's header bar. It holds your logo, menu, search, account, and cart, and it sits inside the Header group along with the Announcement bar. To edit it, open the theme editor and click Header > Navigation.

Choose your layout

Under Layout > Navigation layout, pick how the logo and menu are arranged. There are five options, from the classic logo-left-menu-left to a two-row layout with the menu below the logo. The preview updates as you click through them, so the easiest way to choose is to simply try each one.

Your logo itself (and its size) is set in Theme settings > Logo.

📝 Note: On mobile, the layout is controlled separately under Mobile layout — you can position the logo left or center, and place the menu and search icons on either side.

Keep the navigation visible while scrolling

Set Sticky navigation to:

• On scroll up — the navigation hides as visitors scroll down and reappears when they scroll back up. A nice middle ground that saves screen space.
• Always — the navigation stays pinned to the top at all times.

There's also Floating style, which detaches the navigation from the page edges so it floats as a rounded bar. You can enable it for desktop only or all devices.

Overlay the navigation on your first section

This is the "transparent header" look: the navigation sits on top of your first section (like a full-width slideshow) instead of above it.

1. Turn on Style > Overlay first section.
2. Choose which page types it applies to: home page, collections, articles, pages, products.
3. Pick an Overlay color scheme that's readable on top of your imagery.
4. If your usual logo doesn't work on top of images, upload an Overlay logo (and a mobile version) — it's shown only while the navigation is overlaying.

💡 Tip: Combine this with Solid on scroll so the navigation starts transparent and gets a solid background once visitors scroll down.

Set up your dropdown menus

Pick your menu under Menu > Menu — it's a regular Shopify menu, so the structure (items and nested items) is managed in Online Store > Navigation in your Shopify admin.

Menu items with nested links open as dropdowns. Two settings shape them:

• Menu dropdown layout — vertical (a compact list) or horizontal (sub-items spread out in columns).
• Dropdown open — open on hover or only on click.

Want a big dropdown with images and promos instead? That's a mega menu — add a Mega menu block to the Navigation section and type the name of the menu item it should attach to. See the Mega menu article for the full setup.

Set up the drawer menus

The drawer is the slide-out menu behind the ☰ icon. On mobile it's always there; on desktop you can enable it with Enable desktop drawer menu — useful if you prefer a minimal header, or have a large menu that doesn't fit in the bar.

For both drawers you can choose a Drawer menu style: Accordion (nested items expand in place) or Paged (tapping an item slides to the next level).

You can also add a Footer menu (a smaller secondary menu shown at the bottom of the drawer — handy for policies and contact links) and social media icons.

Show currency and language selectors

Under Localization, enable the country/region and language selectors, and choose what each shows: flag, country name, currency code. The selectors appear in the navigation on desktop and in the drawer on mobile.

📝 Note: The options that appear come from your Shopify settings — add countries in Settings > Markets and languages in Settings > Languages.

Other settings

Style — color scheme, solid or blurred background (with opacity and blur amount), optional border and shadow, and Menu active style (highlight or underline the menu item a visitor is on — this also applies to nested items).

Navigation button — an optional standalone button in the bar, e.g. for a sale or a key page. Set the label, link, and style. On mobile it moves into the drawer.

Account — show or hide the account button and pick the menu shown to logged-in customers.

Cart — choose a cart or bag icon. The icon updates automatically when something's added to the cart.

Search — show or hide the search icon. What happens when it's clicked (the search overlay and its results) is configured in the Predictive search article.

Section layout / Visibility / Content width — the same shared settings as other sections; see Padding settings, Visibility settings, and Width settings.