Show Menu on This CSS Selector

Place the menu on exact CSS selectors in your theme.

With Show menu on this CSS selector, you tell the app exactly which element(s) of your theme to fill with the menu, using CSS selectors. The app places your Globo menu inside every element that matches, replacing its content.

Use this method when Automatically replace and Replace existing menu don't work (custom or heavily edited themes), or when you want the menu somewhere specific — or only on desktop or only on mobile.

As the app says: Only use the option if you are developer or the above options doesn't work. It requires a basic understanding of CSS selectors. If you're not comfortable with it, contact us — we install the menu for free.

Steps to Set Up

1

Select Show menu on this CSS selector

In the menu editor, click the Settings tab (⚙️) and under Position choose Show menu on this CSS selector. Two text fields appear.

Show menu on this CSS selector with its two selector fields

2

Enter the selectors

• CSS selector of your main menu — the element of your desktop menu, for example #SiteNav, .header__inline-menu or nav.main-menu.

• CSS selector of your mobile menu — the element of your mobile menu, for example #AccessibleNav or .menu-drawer.

Not sure what to enter? See How to Find a CSS Selector below, or click How to find CSS selector of your menu? under the fields.

The grey #SiteNav and #AccessibleNav shown in empty fields are only placeholders, not saved values. Type your own selectors.

3

Save and publish

Click Save, then Publish. Check your storefront on desktop and mobile.

💡 Tips

• Several selectors: separate them with commas, e.g. .header__inline-menu, .sticky-header nav. The menu is placed in every matching element.

• Desktop only: fill in the main menu selector and leave the mobile selector empty. Your theme's own mobile menu stays as it is.

• Mobile only: leave the main menu selector empty and fill in the mobile one.

• One element for both: if your theme uses the same element for desktop and mobile, enter the same selector in both fields. The app switches that element between the desktop and mobile layout based on screen size.

• Pick the container, not a single link. The selector should match the element that wraps the whole menu (usually a <nav> or <ul>), otherwise the menu ends up inside one item.

• Prefer stable selectors (IDs or theme class names like .header__inline-menu) over long auto-generated ones like body > div:nth-child(3) > …, which break when the theme changes.

🔎 How to Find a CSS Selector

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> tag whose highlight covers the whole menu.

3

Copy the selector

If the tag has an id, use # + the id (e.g. #SiteNav). If it has a clear class, use . + the class (e.g. .header__inline-menu). Otherwise right-click the tag > Copy > Copy selector. Paste it into the app.

4

Repeat for mobile

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

Check your selector before saving: in the DevTools Console, run document.querySelectorAll('your-selector'). It should return the menu element(s) — if it returns an empty list, the selector is wrong.

Want the menu in a spot where the theme has no menu at all? Add your own empty container to the theme code — see Modify Menu Position (Advanced).

---

Related Articles

Modify Menu Position (Advanced)Can I Show Different Menus on Desktop and Mobile?The Menu Doesn't Show (or Shows Incorrectly)

---

💬 Need help?

Email us at 📧 [e-mail] - we’re happy to assist!