Add a custom menu position

How-to guide All plans 2 min read

Use it when your theme has no menu element where you want the menu, or its header is too custom for the other Position options. You add an empty container to the theme code, then point Show menu on this CSS selector at it.

Caution

Duplicate your theme before you edit code (Online Store > Themes > … > Duplicate). Not comfortable with code? Contact us and we install the menu for you for free.

Add the containers and point the app at them

1. Open the theme code

   Go to Online Store > Themes, click … on the theme and choose Edit code.

2. Add the menu containers

   Paste an empty container where each menu should appear, then click Save. Any ID works; these are examples:

   <div id="GloboDesktopMenu"></div>
   <div id="GloboMobileMenu"></div>

   • Desktop: usually in the header section file (for example sections/header.liquid), where the navigation should be.
   • Mobile: usually in your theme’s menu drawer file, or in layout/theme.liquid.

3. Enter the containers in the app

   In the menu editor, open the Settings tab and choose Show menu on this CSS selector under Position. Enter #GloboDesktopMenu in CSS selector of your main menu and #GloboMobileMenu in CSS selector of your mobile menu.

   

   Enter your container IDs in the two CSS selector fields

4. Save, publish and check

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

Good to know

• One layout only — add a single container and leave the other field empty.
• Existing content is replaced — the app fills each container and replaces anything inside it.
• Your theme’s menu stays — hide or remove it in the code or theme settings if you don’t want both.
• Per theme — code edits apply only to the theme you edited. Add the containers again if you switch or update your theme.

Troubleshooting

The mobile menu doesn't appear

Your theme may build its drawer later with JavaScript. Move the mobile container to code that’s always on the page, such as layout/theme.liquid.

Nothing shows

Make sure the app embed is on for this theme. In your browser console, check that document.querySelector('#GloboDesktopMenu') finds your container.

Related pages

• Show menu on a CSS selectorPlace the menu on exact elements of your theme by entering their CSS selectors.
• Publish a menuPublish your menu to a theme and choose where it appears on your storefront.
• Custom CSSAdd your own CSS to fine-tune how the menu looks.

Was this helpful?

Report an issue