In the Configure step you’ll see two cards, Display on mobile and Display on desktop. This is where you choose whether the menu shows on phones, on computers, or on both.
Navi+ counts any screen 768 px wide or narrower as a phone, and any screen 769 px wide or wider as a computer. When you turn off a device, shoppers who visit your store on that device won’t see the menu. The preview panel in the app always shows the menu, so you can keep editing it easily.
Show or hide the menu on each device
Each card has an on/off switch at the top.
Show menu on mobile
Turn on to show the menu on phones, turn off to hide it.
- When you create a new menu, this switch is on by default for Tab Bar, Icon Menu, Mobile Mega Menu and Floating Button, but off for Desktop Mega Menu.
- Desktop Mega Menu doesn’t have this switch because it’s a menu just for computers. If you want a matching menu on phones, open the Smart responsive card, following the steps in Create a Desktop Mega Menu.
- Mobile Menu doesn’t have this switch either. The Mobile Menu only opens when a shopper taps the button you’ve added to your site. It doesn’t depend on any device switch.
When you turn off Show menu on mobile, the fields below that are specific to phones, such as position, scroll effects and horizontal scrolling, collapse automatically. Whatever you chose before is kept and not lost. The Touch highlight field still shows, because tablets with touch screens still need it.
Show menu on desktop
Turn on to show the menu on computers, turn off to hide it.
- When you create a new menu, this switch is off for Tab Bar, Icon Menu and Mobile Mega Menu, but on by default for Floating Button and Desktop Mega Menu.
- On Mobile Mega Menu, this switch is grayed out and locked, so you can’t click it. The card shows (Not supported) because this menu type is only for phones.
- Mobile Menu doesn’t have this switch.
- When you turn off Show menu on desktop, the fields specific to computers in the same card also collapse automatically.
Menus created from a ready-made template may use values different from the defaults above. Open the Configure step and check these two switches before you publish the menu to your store.
Choose where the menu shows
For Tab, an extra Position field appears right below the switch. For Floating Button, you’ll see two fields, Position on mobile and Position on desktop. See the details in Menu position and margins.
Change the number of Icon Menu items per row on computers
When you build an Icon Menu, you’ll see an extra field, Desktop/mobile display ratio, in the Display on desktop card. This field only appears when the Show menu on desktop switch is on.
You can choose these levels: 1x, 1.5x, 2x, 2.5x, 3x, 4x, 5x. The default is 1x.
If you show the Icon Menu on both phones and computers, computer screens are wider, so they usually need more items on one row. This field multiplies the number of menu items on one row on computers by the ratio you choose. For example, if phones show 5 items in a row and you choose 2x, computers show 10 items in a row.
The ratio only applies to menu items that split the width into grid columns, such as 2/10. Items with Auto width on keep their size and don’t change with this ratio.
Desktop/mobile display ratio
This field is in the Configure step, in the Display on desktop card, as a small box with the same name. It lets an Icon Menu fit more items on computers than on phones.
- Options:
1x,1.5x,2x,2.5x,3x,4x,5x, chosen with round buttons. - Default:
1x(same as phones). Menus created from a ready-made template may use a different ratio. - Applies to: Icon Menu only, for items that split the width into grid columns. Items with Auto width on stay the same. Not available for other menu types. No special plan needed.
- Only appears when: the Show menu on desktop switch is on.
- What shoppers see when you change it: only on computer screens, the number of items per row is multiplied by the ratio, and each item gets narrower to match. Phones don’t change. For example, if phones show 5 items per row and you choose
2x, computers show 10 items per row.
Smart responsive
This card is in the Configure step of the Desktop Mega Menu, where the other menus have the Show menu on mobile switch. It’s a guide, not a setting: by itself it doesn’t change anything on your store until you follow its steps.
- What the card contains: when the menu isn’t embedded yet, the card shows 3 steps: Copy embed item (copies an item that points to this mega menu), choose Mobile Menu to paste it into level 1 (or click Create a Mobile menu if you don’t have one yet), then optionally hide some items from the phone version using the Exclude when embedded field in the item’s Visibility section. Once it’s embedded, the card shows This menu already shows on mobile and lists the Mobile Menus that use it.
- Applies to: Desktop Mega Menu only. No special plan needed.
- What shoppers see when you change it: there’s no field to change. After you paste the embed item into a Mobile Menu, shoppers on phones see the mega menu’s content inside that Mobile Menu, and you only edit the content in one place. An item with Exclude when embedded turned on disappears from the phone version but stays on computers.
Quick reference
| Field in the app | What it does | Default for new menus | Menu types with this field |
|---|---|---|---|
| Show menu on mobile | Shows or hides the menu on phones, screens 768 px wide or narrower | On; Desktop Mega Menu is off | Tab Bar, Floating Button, Icon Menu, Mobile Mega Menu |
| Show menu on desktop | Shows or hides the menu on computers, screens 769 px wide or wider | Off; Floating Button and Desktop Mega Menu are on | Tab Bar, Floating Button, Icon Menu, Desktop Mega Menu. Locked on Mobile Mega Menu |
| Desktop/mobile display ratio | Multiplies the number of menu items per row on computers | 1x |
Icon Menu |
These two switches work exactly the same whether you use Navi+ on Shopify, Wix or any other website.