Unlike a Tab Bar, when you turn on Publish for a Mobile Menu, shoppers still don’t see the menu straight away. The menu only slides out when a shopper taps an open button, such as the ☰ button at the top or a tab at the bottom of the screen. This article shows you how to turn on the menu and choose that open button.
Before you start
- You’ve created a Mobile Menu.
- You’ve turned on the Navi+ app embed in the theme. If not, see Turn on the Navi+ app embed in your theme.
How to turn it on and choose the open button
-
Open the menu in the Navi+ app, then click Publish.
1Build Menu2Design3Configure4Preview & Test5PublishOFF1MoreMenu itemsHome/AutoShopcollections/all2AutoCollectionscollectionsAutoContactpages/contactAutoITEMMobileDesktopPreview only9:41•••yourshop.comSTORE -
Click Turn on at the top of the Publish window. Status changes to ON and the app saves right away. At this point the menu is on, but shoppers still have nothing to tap to open it. If you use Wix or another website, the Publish this menu switch replaces the Turn on button.
PublishMethod 1: Open the menu from a menu spotNo code needed — Navi+ already found your theme’s menu icon and logo.STATUS:OFF3Turn on2STEP 1Enable Navi+ in Theme → App embeds Store Connector is on in Dawn. Review
This is Shopify’s standard method - safe and removable anytime.STEP 2Where can shoppers open this menu? Pick one or more.Use your existing menu iconTapping your theme’s ≡ button opens this Navi+ menu instead of the theme drawer.Add a ≡ icon next to your logoNavi+ places a small ≡ icon beside your logo — for desktop, or when the theme has no menu button.Floating buttonAn independent ≡ button floating on your site — tap or click it to open.Somewhere elseTap any element you choose, or insert a ≡ icon before/after it (CSS Selector). For developers too.STEP 3Optimize speed & experience SetupSTEP 4Test this menu Open Test -
Scroll down to Where can shoppers open this menu? and choose one or more ways for shoppers to open it. The table below helps you pick the right one for your store.
PublishMethod 1: Open the menu from a menu spotNo code needed — Navi+ already found your theme’s menu icon and logo.STATUS:ONTurn offSTEP 1Enable Navi+ in Theme → App embeds Store Connector is on in Dawn. Review
This is Shopify’s standard method - safe and removable anytime.STEP 2Where can shoppers open this menu? Pick one or more.Use your existing menu iconTapping your theme’s ≡ button opens this Navi+ menu instead of the theme drawer.3Add a ≡ icon next to your logoNavi+ places a small ≡ icon beside your logo — for desktop, or when the theme has no menu button.4Floating buttonAn independent ≡ button floating on your site — tap or click it to open.5Somewhere elseTap any element you choose, or insert a ≡ icon before/after it (CSS Selector). For developers too.6STEP 3Optimize speed & experience SetupSTEP 4Test this menu Open Test -
Click save, then open your store on a phone and tap the open button you just chose.
9:41•••yourshop.comSTORESTOREHomeShopCollectionsAbout usContactThe Mobile Menu opens after the shopper taps
Choose the right way to open the menu
In the Publish window there are four cards for ways to open the menu: Use your existing menu icon, Add a ≡ icon next to your logo, Floating button and Somewhere else. You can also attach this menu to a menu item of another Navi+ menu, such as a tab on a Tab Bar. All five ways open the same Mobile Menu.
| Way to open | When to use it | What you need to do |
|---|---|---|
| The theme’s ☰ button — Use your existing menu icon | The theme already has a ☰ button on phones, and you want tapping it to open the Navi+ menu instead of the theme’s old menu | Navi+ finds the theme’s ☰ button by itself. If the app can’t find it, enter a CSS selector as described in Navi+ Live: place the menu in the right spot |
| A tab on a Tab Bar or another Navi+ menu item | You have a Tab Bar at the bottom of the screen and want the “Menu” tab to open the drawer | Paste the code open:NaviMenu(menu code) into the link field of that menu item. This code is already in the Publish window of the Mobile Menu. Just click it to copy; it isn’t a separate card |
| An extra Navi+ ☰ icon — Add a ≡ icon next to your logo | The theme has no ☰ button, or you want an extra ☰ button on computers | Nothing else to set up. Navi+ places a small ☰ icon right next to the logo |
| A floating button — Floating button | You want an open button that floats in a corner of the screen all the time | Nothing else to set up. You can change the text, icon, color and position of the button right below |
Besides these four ways, there’s the Somewhere else card. It lets you turn any element on the page into an open button, or insert a ☰ icon just before or after that element, using a CSS selector. A CSS selector is the address of the element on the page.
Use the built-in button of a Shopify theme
Navi+ has already measured the position of the ☰ button, logo, search icon and cart icon of more than 300 popular Shopify themes. So when you choose Use your existing menu icon, the menu usually works straight away without a selector. If your theme isn’t on the supported list, choose the Somewhere else card and use Navi+ Live to point at the button to tap on the page.
Open the same menu from several places
You can turn on several ways to open the same Mobile Menu. For example, on phones shoppers tap the theme’s ☰ button, and on computers they tap the icon next to the logo.
If you want to show several Mobile Menus with different content on the same page, create a separate menu for each and choose a separate open button for each.
How shoppers close the menu
When the menu is open, shoppers tap the ✕ button at the corner of the menu to close it. You can change the style of the close button and the slide-out effect in Arrows, close button and open effect.
Fix a menu that doesn’t open as expected
Publish is on but the menu doesn’t open
If you’ve just clicked Turn on without choosing an open method in step 3, the menu can’t appear yet. Go back to step 3 and choose at least one way to open it. If you’ve chosen one and tapping it still shows nothing, read The ☰ button doesn’t open the Mobile Menu.
I don’t know where to get the CSS selector for the ☰ button
You don’t need to search the source code. Use Navi+ Live and click the ☰ button on the store page; Navi+ fetches its address for you. See Navi+ Live: place the menu in the right spot.
Tapping ☰ opens two menus at once
When you tap the ☰ button, both the theme’s old menu and the Navi+ menu slide out, because the theme’s menu isn’t turned off yet. See how to fix this in Menu shows twice.
Other platforms
The steps above are for Shopify — the default way.
On Wix and other platforms there’s no Menu in Section app block, but the CSS selector way still works. Tab Bar and Floating Button open the Mobile Menu on every platform. On Wix, the app attaches itself to the site, so there’s no app embed step.
On other websites (dash.naviplus.app) and WordPress, there’s no Menu in Section app block, only a CSS selector field. Tab Bar and Floating Button open the Mobile Menu everywhere. Instead of the app embed, other websites paste a code snippet into the head; on WordPress, activate the Naviplus Menu Builder plugin.