You’ll find the settings in this article under Configure (step 3 on the vertical step bar at the left, which opens a large panel that slides in from the right), in the Display on mobile card, right below the Show menu on mobile switch. This is where you adjust how the menu reacts when a shopper touches, scrolls or swipes. The two scroll-hide fields for computers are in the Display on desktop card.
Depending on the menu type you’re editing, you only see the fields that fit it. See the table at the end of this article for which menu type has which field.
Highlight color when touched
The Touch highlight (mobile/tablet) block has two fields side by side. When a shopper touches and holds a menu item, the background of that item changes to the color you chose, so the shopper knows the tap registered. This block needs the Business plan or higher. On lower plans it’s faded out and shows an Upgrade to Business button. Even if you turn off Show menu on mobile, this block still shows, because tablets with touch screens also use it.
BG Color
Found in Configure › Display on mobile › the Touch highlight (mobile/tablet) block. This is the color of the glow that appears when a shopper touches an item.
- Options: pick a color from the palette or type a color code. If you leave it empty, the field shows
Inherit, and the menu uses its default touch color. - Default for new menus: empty.
- Applies to: all 6 menu types, every level, every item type. Needs the Business plan or higher.
- What shoppers see: only when you’ve picked a color, the touched item changes to that color (both level 1 items and sub-items, except group titles and dividers). If you leave it empty, shoppers see the default touch effect.
Opacity /100
Next to the BG Color field. This is how strong the touch color is.
- Options: a number from 0 to 100 (0 is transparent, 100 is fully solid). You don’t need to type the % sign.
- Default for new menus: empty. If you’ve picked a BG Color but leave this field empty, the app uses
15. - Applies to: all 6 menu types. Needs the Business plan or higher.
- Only has an effect when you’ve picked a BG Color. If you haven’t picked a color, this field changes nothing.
- What shoppers see: the higher the number, the stronger the color glow, which can hide the item’s background. A low number only lightly tints it.
Hide and show the menu as shoppers scroll
The Scroll effects block automatically hides or shows the menu depending on the direction the shopper scrolls, so it doesn’t crowd the page content. Only Tab Bar and Floating Button have this block. The two fields on each screen (phone, computer) work in opposite ways, so turn on only one of them.
Hide when scrolling down on Mobile screen
Found in Configure › Display on mobile › the Scroll effects block. Use it when you want the menu out of the way while the shopper scrolls down to read.
- Options: on/off switch.
- Default for new menus: on if you create a new menu yourself in the app. If you create a menu from a ready-made template or with AI, this field may be off, so check it.
- Applies to: Tab Bar and Floating Button, every plan, every platform.
- Only has an effect when Show menu on mobile is on.
- What shoppers see: when the page first opens, the menu shows. When the shopper scrolls down, the menu slides out of view, and when they scroll up, it comes back. Near the top of the page the menu always shows; at the very bottom of the page it’s always hidden.
- When you turn this field on, Navi+ doesn’t reserve empty space at the bottom of the page for the Tab Bar, because the bar hides itself when the shopper scrolls down. When it’s off, the bottom of the page gets an extra space exactly the height of the Tab Bar, so the bar doesn’t cover the footer.
Only show after scrolling down on Mobile
Right below the Hide when scrolling down field, in the same Scroll effects block. Use it when you want a clean top of the page, with the menu appearing only after the shopper has scrolled down to read.
- Options: on/off switch.
- Default for new menus: off.
- Applies to: Tab Bar and Floating Button, every plan, every platform.
- Only has an effect when Show menu on mobile is on.
- What shoppers see: when the page first opens, the menu is hidden. When the shopper scrolls down, the menu slides in, and when they scroll up, it hides again. Near the top of the page the menu always stays hidden; at the very bottom of the page it always shows.
Hide when scrolling down on desktop screen
The same as the field above, but for computers. Found in Configure › Display on desktop › the Scroll effects block.
- Options: on/off switch.
- Default for new menus: off.
- Applies to: Tab Bar and Floating Button, every plan, every platform.
- Only has an effect when Show menu on desktop is on. If your Tab Bar is set as a vertical bar right against the left or right edge of the screen, this field has no effect (a Floating Button always works).
- What shoppers see: scrolling down hides the menu, scrolling up shows it again. It works the same way as the field on phones.
Only show after scrolling down on Desktop
The same as Only show after scrolling down on Mobile, but for computers. Right below the field above, in Configure › Display on desktop › Scroll effects.
- Options: on/off switch.
- Default for new menus: off.
- Applies to: Tab Bar and Floating Button, every plan, every platform.
- Only has an effect when Show menu on desktop is on. A Tab Bar set as a vertical bar against the left or right edge can’t use this field either.
- What shoppers see: when the page first opens, the menu is hidden. Scrolling down shows it, and scrolling up hides it again.
Lock the page while a submenu is open
Lock page scroll when submenu is open
Found in Configure › Display on mobile › the Overlay & page scroll block. This field is only on the Tab Bar and only works on phones.
- Options: on/off switch.
- Default for new menus: on.
- Applies to: Tab Bar only, every plan, every platform.
- What shoppers see: when it’s on, while a level 2 or level 3 submenu is open, the page behind stays still, and the shopper only scrolls the submenu list. The shopper won’t accidentally scroll the page below, and the Tab Bar doesn’t hide itself while the submenu is open. When it’s off, the shopper can scroll the page behind while the submenu is open, so if the submenu is long, both can scroll at the same time.
- Most stores should keep this on.
Swipe sideways on phones
When the list of menu items is longer than the phone screen, the Horizontal scroll (Mobile only) block lets the shopper swipe sideways to see the rest. This block is in the Display on mobile card. It only exists for Icon Menu and Mobile Mega Menu, and it’s hidden when you turn off Show menu on mobile.
Enable horizontal scrolling on mobile
At the top of the Horizontal scroll (Mobile only) block. Use it when the row of menu items is wider than the phone screen.
- Options: on/off switch. The small line below it reads “If the layout < Screen width”, which means: use this when the total width of the items is larger than the screen.
- Default for new menus: off.
- Applies to: Icon Menu and Mobile Mega Menu, every plan, every platform.
- What shoppers see: when on, the menu row on phones can be swiped sideways, instead of wrapping onto several lines. On computers, the menu always spreads across 100% of its container and doesn’t scroll sideways.
- When it’s on, the Fix width of the menu field below it appears.
Fix width of the menu (px)
Right below the Enable horizontal scrolling on mobile switch. This is the total width of the menu’s scrolling area.
- Options: a number, in px.
- Default for new menus:
520. - Applies to: Icon Menu and Mobile Mega Menu.
- Only appears when Enable horizontal scrolling on mobile is on. If this number is empty or 0, the menu is treated as not scrolling sideways.
- What shoppers see, depending on how you set the width of each item:
- Items set to Auto width: you don’t need to worry about this number. The app stretches and shrinks them to fit the container and enables sideways swiping if the items are wider than the screen.
- Items split into grid columns like 2/10: this number sets the total width of the whole grid. On phones, the items can wrap onto several rows and share the width you’ve entered equally.
Scroll to screen edges
At the end of the Horizontal scroll (Mobile only) block, right below the Fix width of the menu field. This field only exists on Mobile Mega Menu.
- Options: on/off switch. The small line below it reads: “Items slide all the way to the edges of the phone screen, even when the theme section has side margins”.
- Default for new menus: on for Mobile Mega Menus created from the Blank template (the wizard and AI also set it this way). Older menus that don’t have this field keep it off, so they look the same as before.
- Applies to: Mobile Mega Menu only.
- What shoppers see: when on, the row of items that scrolls sideways runs all the way to both edges of the phone screen, instead of being cut off by the theme section’s margins. When off, the row stays inside the theme’s margins. This setting applies both to the scrolling area you turned on and to the scrolling area Navi+ wraps automatically when the row overflows.
Which menu type has which setting
| Block / field in the app | Tab Bar | Floating Button | Icon Menu | Mobile Mega Menu | Mobile Menu | Desktop Mega Menu |
|---|---|---|---|---|---|---|
| BG Color and Opacity /100 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Hide when scrolling down / Only show after scrolling down (phones) | ✓ | ✓ | ||||
| The two similar fields on computers: Hide… / Only show… | ✓ | ✓ | ||||
| Lock page scroll when submenu is open | ✓ | |||||
| Enable horizontal scrolling + Fix width of the menu (px) | ✓ | ✓ | ||||
| Scroll to screen edges | ✓ |
Only the Touch highlight block needs the Business plan or higher. All other settings are open on every plan on Shopify, Wix and other website platforms.