Show menu on a CSS selector

How-to guide All plans 2 min read

The app places your menu inside every element that matches, replacing its content. Use it on custom or heavily edited themes where Automatically replace and Replace existing menu don’t work, for a specific spot, or for desktop-only or mobile-only menus.

Note

The app recommends this option for developers, or when the other options don’t work. Not comfortable with CSS selectors? Contact us and we install the menu for you for free.

Set up the CSS selectors

1. Select Show menu on this CSS selector

   In the menu editor, click the Settings tab in the left bar. Under Position, choose Show menu on this CSS selector.

   

   Show menu on this CSS selector with its two selector fields

2. Enter the selectors

   Fill in the two fields described in Settings. The grey #SiteNav and #AccessibleNav are placeholders, not saved values.

3. Save and publish

   Click Save, then publish the menu. Check your storefront on desktop and on mobile.

Settings

CSS selector of your main menu

The element that holds your desktop menu, for example #SiteNav, .header__inline-menu or nav.main-menu. Leave it empty to show the menu on mobile only.

CSS selector of your mobile menu

The element that holds your mobile menu, for example #AccessibleNav or .menu-drawer. Leave it empty to keep your theme’s mobile menu (desktop only).

• Several elements — separate selectors with commas, for example .header__inline-menu, .sticky-header nav. The menu goes into every match.
• One element for both layouts — enter the same selector in both fields. The app switches it between desktop and mobile layout by screen size.
• Pick the container, not a single link — match the element that wraps the whole menu (usually a <nav> or <ul>), or the menu ends up inside one item.
• Prefer stable selectors — IDs or theme classes like .header__inline-menu. Generated selectors like body > div:nth-child(3) > … break when the theme changes.

Find a CSS selector

You can also click How to find CSS selector of your menu? under the fields.

1. Inspect the menu

   Open your store in Chrome, right-click the menu and choose Inspect.

2. Find the menu container

   In the Elements panel, hover over the tags. Find the closest <nav> or <ul> whose highlight covers the whole menu.

3. Copy the selector

   Use # plus its id (#SiteNav) or . plus a clear class (.header__inline-menu). Otherwise right-click the tag, choose Copy > Copy selector and paste it into the app.

4. Repeat for mobile

   Click the device icon in DevTools, choose a phone and open the mobile menu (hamburger icon). Repeat to get the mobile selector.

Tip

Test a selector before you save it: in the DevTools Console, run document.querySelectorAll('your-selector'). An empty list means the selector is wrong.

Want the menu where your theme has no menu at all? See Add a custom menu position.

Related pages

• Add a custom menu positionShow the menu exactly where you want by adding your own container to the theme code.
• Can I use different desktop and mobile menus?Show one menu on desktop and another on mobile, or hide some items per device.
• Why doesn't my menu show on my store?A step-by-step checklist when the menu is missing from your storefront or looks wrong.

Was this helpful?

Report an issue