> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/globo-mega-menu/basic-knowledge/publish-new-menu-to-theme/show-menu-on-this-css-selector.md).

# 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](/globo-mega-menu/basic-knowledge/publish-new-menu-to-theme/automatic.md) and [Replace existing menu](/globo-mega-menu/basic-knowledge/publish-new-menu-to-theme/replace-navigation.md) don't work (custom or heavily edited themes), or when you want the menu somewhere specific — or only on desktop or only on mobile.

{% hint style="info" %}
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.
{% endhint %}

## <mark style="color:blue;">Steps to Set Up</mark>

{% stepper %}
{% step %}

### 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.

<figure><img src="https://2995734148-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqP3YAfC1xaiWJzITQ9sI%2Fuploads%2Fgit-blob-1102194426cff3dc0aeb46e5e68d276047ef8507%2Fsettings-position-css.png?alt=media" alt="CSS selector fields"><figcaption><p>Show menu on this CSS selector with its two selector fields</p></figcaption></figure>
{% endstep %}

{% step %}

### 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.

{% hint style="warning" %}
The grey `#SiteNav` and `#AccessibleNav` shown in empty fields are only **placeholders**, not saved values. Type your own selectors.
{% endhint %}
{% endstep %}

{% step %}

### Save and publish

Click **Save**, then **Publish**. Check your storefront on desktop and mobile.
{% endstep %}
{% endstepper %}

## 💡 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

{% stepper %}
{% step %}

### Inspect the menu

Open your store in Chrome, right-click the menu and choose **Inspect**.
{% endstep %}

{% step %}

### 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.
{% endstep %}

{% step %}

### 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.
{% endstep %}

{% step %}

### 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.
{% endstep %}
{% endstepper %}

{% hint style="success" %}
**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.
{% endhint %}

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)](/globo-mega-menu/basic-knowledge/modify-menu-position-advanced.md).

***

### Related Articles

{% content-ref url="/pages/8V6tywxRL2puRda9vczR" %}
[Modify Menu Position (Advanced)](/globo-mega-menu/basic-knowledge/modify-menu-position-advanced.md)
{% endcontent-ref %}

{% content-ref url="/pages/YgBQyBJPrhg1mv3rHLqP" %}
[Can I Show Different Menus on Desktop and Mobile?](/globo-mega-menu/faqs/can-i-show-each-separate-menu-on-mobile-version-and-desktop-version.md)
{% endcontent-ref %}

{% content-ref url="/pages/xrVVZ40v8dnp0dB2SnP5" %}
[The Menu Doesn't Show (or Shows Incorrectly)](/globo-mega-menu/faqs/why-the-menu-does-not-show-or-shows-incorrectly-on-our-website.md)
{% endcontent-ref %}

***

**💬 Need help?**

Email us at **📧** [**contact@globo.io**](mailto:contact@globo.io) - we’re happy to assist!