Can I use different desktop and mobile menus?

FAQ 1 min read

Short answer

Yes. If the menus are mostly the same, hide some items per device. If they’re completely different, create two menus — this needs the Pro Navigation plan.

Hide items on one device

Open the item > Visibility and tick Hide on desktop or Hide on mobile. See Edit a menu item.

Use two different menus

1. Create two menus

   In Menu manager, create a desktop menu and a mobile menu, or duplicate your menu and edit the copy.

2. Set up the desktop menu

   Open the desktop menu > Settings > Position > Show menu on this CSS selector. Enter only the CSS selector of your main menu and leave the mobile selector empty.

   

   Show menu on this CSS selector with its two selector fields

3. Set up the mobile menu

   Do the opposite: leave the main menu selector empty and enter only the CSS selector of your mobile menu.

4. Save and publish both menus

   Click Save, then Publish on each menu. Check your store on a computer and on a phone.

To find the selectors, see Show menu on this CSS selector. Not sure which to use? Contact us and we set it up for free.

Related pages

• Show menu on a CSS selectorPlace the menu on exact elements of your theme by entering their CSS selectors.
• Multiple menus and campaignsKeep several menus ready, switch between them for campaigns, and understand which menu is shown.
• Edit a menu itemChange an item's title, link, icon, colors, badge, submenu and visibility, or duplicate, move and delete it.

Was this helpful?

Report an issue