A Mobile Menu is always hidden by default. Shoppers have to tap a button on the screen before the menu slides out. You find the settings in this article when you click Publish on the toolbar, under Where can shoppers open this menu?. This section only appears when you’re editing a Mobile Menu.
This article explains each setting for the 3 ways to open the menu: the floating button, the ≡ icon next to the logo and the fixed sidebar. If you need step-by-step instructions to choose a way to open it, see Put your Mobile Menu on your store.
Open the Mobile Menu with a floating button
This way creates a button that floats on the store screen. When a shopper taps it, the Mobile Menu slides out. Because the button works on its own, you can use it even if the theme has no ☰ button.
This is Shopify’s standard method - safe and removable anytime.
This is a floating button to open the Mobile Menu, found in the Publish window of a Mobile Menu. It's different from the Floating Button menu type (a floating button that holds contact shortcuts).
Show a floating button on this site switch
Where it is and what it does: Publish › the Floating button card (on Wix and other websites it’s Method 4). Switch it on and Navi+ draws a standalone floating button on the store. When a shopper taps it, the Mobile Menu slides out. Switch it off and the button disappears from the store.
- Options: on / off. Default for a new menu: off.
- Applies to: only Mobile Menu, the whole menu (there are no levels or item types for this). Not limited by plan.
- Condition: the button only shows on the store when the menu is turned on in Publish. If the menu is off, the floating button doesn’t show either.
- What shoppers see: when on, the page gets a fixed button on the screen. It stays in place as the shopper scrolls. When the menu is open, the drawer covers the button. When off, the button is removed from the page.
- Wix / other websites: the same switch in Method 4, with the same editing window.
To turn on the button, click the Floating button card, then switch on Show a floating button on this site, which is off by default. Once it’s on, the card shows a summary of the button’s look and its current position on Mobile and Desktop. Click Customize floating button to open the Floating button window and adjust the details. Every change shows right away in the preview beside it. When you’re done, click Done to close the window, then save.
Set the button look
Choose one of two display types under Media:
| Type | Fields | Default |
|---|---|---|
| Icon + Text | Icon: the icon on the button. Choose Blank if you only want text | ≡ icon |
| Button text: the text on the button. Click the globe icon to translate this text into other languages | Empty, Optional |
|
| Background color: the background color of the button | #000000 black |
|
| Text/Icon color: the color of the text and the icon | #FFFFFF white |
|
| Curve (px): how rounded the button corners are | Inherit, left empty |
|
| Shadow: how strong the drop shadow is: None, Soft, Medium, Strong | Soft | |
| Image | Image: paste an image link, or click Select to pick an image from the library | Empty |
How these fields work in practice:
- If you use the Icon + Text type and leave both the icon and the text empty, Navi+ shows the ≡ icon automatically so the button doesn’t disappear.
- The Image type shows only the image you choose, with no background color and no padding. The fields for color, corners and shadow only apply to Icon + Text, not to images.
- If you choose the Image type but don’t pick an image, the button doesn’t show on the store.
- When you leave the Curve (px) field empty, Navi+ rounds the corners based on where the button sits: a button at the bottom of the screen is fully rounded, while a button stuck to an edge is only rounded on the inward-facing corners. At the 4 Corner positions, the button always has square corners, whatever number you enter.
Media
Where it is and what it does: at the top of the Floating button window, two buttons, Icon + Text and Image. Choose whether your button is a clickable button with an icon and text, or just a picture.
- Options: Icon + Text or Image. Default: Icon + Text.
- Applies to: only Mobile Menu, not limited by plan.
- Only shows when: the Show a floating button on this site switch is on.
- What changing it does: choose Icon + Text and the window shows the Icon, Button text, Background color, Text/Icon color, Curve and Shadow fields. Choose Image and those fields hide, leaving only the Image field.
- What shoppers see: the Image type shows exactly the picture, with no background and no shadow. The Icon + Text type shows a button with a colored background.
Icon
Where it is and what it does: in the Floating button window, the small square that shows the current icon. Click it to open the icon picker and choose the icon on the button.
- Options: one icon from the picker, or Blank (no icon). Default: ≡ icon (menu).
- Applies to: only Mobile Menu, not limited by plan.
- Only shows when: Media = Icon + Text.
- What shoppers see: the icon sits to the left of the text on the button. Choose Blank and enter text, and the button shows only the text. Choose Blank and also leave the text empty, and Navi+ puts the ≡ icon back so the button doesn’t disappear.
Button text
Where it is and what it does: in the Floating button window, the text box next to the icon (suggested Optional). This text shows on the button, for example “Menu” or “Categories”.
- Options: type freely. Click the globe icon next to the label to enter a translation for each language. Default: empty.
- Applies to: only Mobile Menu, not limited by plan.
- Only shows when: Media = Icon + Text.
- What shoppers see: with text, the button gets wider and the text sits beside the icon. Leave it empty and the button shows only the icon. On a multi-language store, the translation matching the shopper’s language is shown.
Image
Where it is and what it does: in the Floating button window, when Media = Image. Paste an image link into the field, or click Select to choose from the image library.
- Options: an image link (
https://…). Default: empty. - Applies to: only Mobile Menu, not limited by plan.
- Only shows when: Media = Image.
- What shoppers see: the exact picture floats on the store, with no background and no shadow. Tapping the picture opens the menu. If you choose the Image type without a picture, the button doesn’t show on the store, so remember to pick an image before you save.
Background color
Where it is and what it does: in the Floating button window, the first color field in the row. It sets the background color of the button.
- Options: pick a color or enter a
#RRGGBBcode. Default:#000000(black). - Applies to: only Mobile Menu, not limited by plan.
- Only shows when: Media = Icon + Text. The Image type doesn’t use a background color.
- What shoppers see: the button background changes right away. Choose a color that contrasts with the Text/Icon color so the text stays readable.
Text/Icon color
Where it is and what it does: in the Floating button window, the color field next to Background color. It sets the color of both the text and the icon on the button.
- Options: pick a color or enter a
#RRGGBBcode. Default:#FFFFFF(white). - Applies to: only Mobile Menu, not limited by plan.
- Only shows when: Media = Icon + Text.
- What shoppers see: the text and the icon both change to that color. It’s one color for both; you can’t set them separately.
Curve (px)
Where it is and what it does: in the Floating button window, the number field with the suggested Inherit. It sets how rounded the button corners are.
- Options: a number from 0 up, in px. Default: empty (Navi+ picks the shape based on where the button sits).
- Applies to: only Mobile Menu, not limited by plan. One value is shared between Mobile and Desktop.
- Only shows when: Media = Icon + Text.
- What shoppers see: when empty, a button at the bottom of the screen is a pill shape (rounded at both ends), while a button stuck to an edge is only rounded on the two inward-facing corners. Entering
0makes the button square, and larger numbers make it rounder. At the 4 Corner positions the button is always square, whatever number you enter. A button stuck to an edge that has a Margin greater than 0 (so it’s moved away from the edge) gets all four corners rounded.
Shadow
Where it is and what it does: in the Floating button window, the last choice in the row. It sets how strong the shadow under the button is, so the button stands out from the page background.
- Options: None (no shadow), Soft (light), Medium, Strong (heavy). Default: Soft.
- Applies to: only Mobile Menu, not limited by plan.
- Only shows when: Media = Icon + Text.
- What shoppers see: a soft shadow under the button. The stronger the shadow, the more the button separates from the background. A light button on a light page needs Medium or Strong to stand out.
Choose the position and scroll effects
The window is split into two panels, one for Mobile and one for Desktop. Each panel has these settings:
| Field | What it does | Default |
|---|---|---|
| Display | Turns the button on or off on that device. When off, the fields below collapse, but keep their old settings | On for both |
| Position | Click a cell in the grid to place the button | Bottom-right |
| Margin (px) | Distance from the button to the edge of the screen | Inherit, left empty |
| Scroll effects | Two options that hide or show the button as the shopper scrolls the page. See the table below | Both off |
In the position grid, you can place the button in these spots:
| Position group | Options |
|---|---|
| At the bottom | Bottom-left, Bottom-center, Bottom-right |
| Stuck to an edge | Left edge, Right edge, Top edge, Bottom edge |
| At a corner | Corner top-left, Corner top-right, Corner bottom-left, Corner bottom-right |
| Phone only | Top-left overlay: places the button over the theme’s default ☰ button |
The Top-left overlay position doesn’t exist on computers, so the Desktop panel has 11 positions and the Mobile panel has 12.
The Scroll effects section has two options that hide or show the button based on how the shopper scrolls:
| Field on phones | Field on computers | Result on the store |
|---|---|---|
| Hide when scrolling down on Mobile screen | Hide when scrolling down on desktop screen | When the shopper scrolls down, the button hides for a moment so it doesn’t block the screen |
| Only show after scrolling down on Mobile | Only show after scrolling down on Desktop | When the shopper first arrives, the button is hidden and only appears after they start scrolling down |
Other platforms
The steps above are for Shopify — the default way.
On Wix, the floating button is in Method 4 of the Publish window, turned on with the Show a floating button on this site switch. The Floating button editing window and the fields above are exactly the same as on Shopify.
On other websites, the floating button is also in Method 4, with the same switch and the same editing window as above.
Reuse the theme’s existing ≡ button
If your theme already has its own ☰ button, you don’t need to add a new one. Just tell Navi+: “when the shopper taps that button, open the Navi+ menu instead of the theme’s drawer.”
Use your existing menu icon
Where it is and what it does: Publish › the Use your existing menu icon card (on Wix and other websites it’s Method 2, a text box for the CSS selector). Point to the theme’s ☰ button, and Navi+ attaches the “open Mobile Menu” action to that button.
- Options: one or more CSS selectors (the address of the button on the page), separated by commas. If you don’t know the selector, use Navi+ Live to point at the button directly. See Find the spot with Navi+ Live. Default: empty.
- Applies to: only Mobile Menu, not limited by plan.
- Condition: the menu is turned on in Publish. If left empty, no button is attached.
- Device suffix:
(M)means phones only,(D)means computers only, no suffix means both. On the Shopify version, this card doesn’t add a suffix, so the button follows the theme on every device. - What shoppers see: when the shopper taps the theme’s ☰, the Navi+ Mobile Menu slides out, and the theme’s original drawer doesn’t open. If the theme replaces this button after the page has loaded, Navi+ attaches to it again automatically. A selector with a typo (missing bracket, extra quote) only makes that one selector get skipped. The other selectors still work.
Other platforms
The steps above are for Shopify — the default way.
On Wix, this field is Method 2: type the CSS selector straight into the box, with several selectors separated by commas. You can add (M) or (D) at the end to apply it to one device only, for example #your-menu(M).
On other websites it’s also Method 2, with the same way of typing the selector and the same (M) / (D) suffix as the Wix tab.
Insert a ≡ icon next to your logo
In the Add a ≡ icon next to your logo card, Navi+ inserts a small ≡ icon right beside the store logo. When a shopper taps this icon, the Mobile Menu opens. This works well when you want the Mobile Menu on computers, or when the theme doesn’t have a ☰ button.
Add a ≡ icon next to your logo
Where it is and what it does: Publish › the Add a ≡ icon next to your logo card (on Wix and other websites it’s Method 3, a text box). Navi+ inserts an extra ≡ icon right next to the logo (or the element you specify). When a shopper taps it, the Mobile Menu opens.
- Options: tick the card, then set Side, Color and Boxed (table below). In the text box on Wix and other websites, type the line in the form
selector|color|boxed|side(device), with several lines separated by commas. Default: empty, no icon is inserted. - Applies to: only Mobile Menu, not limited by plan. You can use several ways to open the menu at once, for example both the icon next to the logo and a floating button.
- Condition: the menu is turned on in Publish.
- What shoppers see: a small ≡ icon next to the logo. By default it only shows on computers (suffix
(D)). Add(M)or remove the suffix to show it on phones. On the Shopify version, Navi+ adds this suffix for you.
When Navi+ finds the logo’s position on the theme automatically, the card shows 3 fields for you to adjust:
| Field | What it does | Default |
|---|---|---|
| Side | Places the icon on the left (Left) or right (Right) of the logo | Left |
| Color | The color of the icon, entered as a color code such as #000 |
Empty, takes the color from the theme |
| Boxed | Adds a square frame around the icon | Off |
If Navi+ hasn’t found the logo yet, the card shows Not found yet with a Find it in Live mode button. Click it to point directly at the logo on the web, following the steps in Find the spot with Navi+ Live.
By default, the icon next to the logo only shows on computers, so the location address ends with (D) already.
Other platforms
The steps above are for Shopify — the default way.
On Wix there’s no ready-made card. This way is in Method 3: type one line into the box in the form selector|color|boxed|side(device). For example .logo-wrap|#000|false|right(D).
| Part | Meaning | Default |
|---|---|---|
selector |
The address of the element to insert the icon next to | Required |
color |
Icon color (#FFF, FFF and #FFFFFF all work) |
From the theme |
boxed |
true or false: wrap the icon in a square frame |
false |
side |
left or right |
left |
(M) (D) |
(M) phones only, (D) computers only, empty means both |
Both |
Separate several lines with commas.
On other websites, this also uses Method 3 with the same selector|color|boxed|side(device) syntax as the Wix tab.
Show a fixed sidebar on desktop
Instead of hiding the menu until the shopper taps, you can show the Mobile Menu as a fixed vertical sidebar beside the computer screen. In the Publish window, this section shows the reminder line: Fixed Sidebar: Display the menu as an always-visible sidebar on desktop.
You don’t turn this on in Publish. Open the Configure step, choose Fixed Sidebar as the slide direction, then switch on Display a fixed menu on desktop. For the detailed settings, see Mobile Menu: slide direction, width and fixed position.
Quick summary of the 3 ways to open
| Way to open | Switch or field | Where to set it | Default |
|---|---|---|---|
| Floating button | Show a floating button on this site | Publish › Floating button card › Customize floating button | Off |
| ≡ icon next to logo | Side, Color, Boxed | Publish › Add a ≡ icon next to your logo card | Left, color from the theme, no frame |
| Fixed sidebar | Display a fixed menu on desktop | Configure tab | See the slide direction article |