This article is a reference for the settings that control where the menu sits on screen. There are two groups: the Position field of a Tab Bar, and the Position on mobile, Position on desktop and Bottom spacing fields of a Floating Button. If you’d rather read by task (for example “make the Tab Bar float at the top of the screen”), see Menu position and margins.
Other menu types don’t have position fields here. A Mobile Menu sets its slide direction in Main menu Slide Direction. A Desktop Mega Menu, Mobile Mega Menu and Icon Menu are placed where you choose when you publish. See Where each menu shows on your store.
Where to find the position fields
- Open the menu and click the Configure step on the vertical step bar on the left edge. The Configure panel slides in from the right.
- Scroll to the Display on mobile box (phone) or Display on desktop box (computer). The box is at the top of the panel.
- Choose the position right in the box. The preview updates, then click Save.
To turn the menu off completely on one device type, untick Show menu on mobile or Show menu on desktop at the top of the box. See also Show the menu on mobile and desktop.
| Field | Used for | Default |
|---|---|---|
| Position (mobile) | Tab Bar | Bottom edge of the screen |
| Position (desktop) | Tab Bar | Center of the bottom edge |
| Position on mobile | Floating Button | Bottom-right (right corner) |
| Bottom spacing (mobile) | Floating Button | 16 px |
| Position on desktop | Floating Button | Bottom-right (right corner) |
| Bottom spacing (desktop) | Floating Button | 16 px |
Tab Bar position
The Tab Bar picks its position from a row of small pictures (choose one). The app only shows the pictures, with no names, so the names are listed below each picture to help you find them.
Position on mobile
The Position field in the Display on mobile box: chooses where the Tab Bar sits on the phone screen.
- Options (6 pictures, in the order shown in the app): (1) bottom edge of the screen, (2) top edge of the screen, (3) vertical bar at the middle of the right edge, (4) vertical bar at the middle of the left edge, (5) vertical bar at the bottom-right corner, (6) vertical bar at the bottom-left corner. The app tags pictures 1 and 5 as POPULAR.
- Default for a new menu: picture 1, bottom edge.
- Applies to: only Tab Bar. Other menu types don’t show this field. Every plan, on Shopify, Wix and other websites. The field is hidden when you untick Show menu on mobile.
- What shoppers see when you change it:
- Pictures 1 and 2: the bar spans the full width, stuck to the bottom or top edge of the screen. Navi+ leaves room for the bar (it pushes the page content up or down) so the bar doesn’t cover the top or bottom of the page.
- Pictures 3 to 6: the Tab Bar becomes a vertical bar, and its items stack from top to bottom. A submenu opens to the left of the bar when the bar sits on the right.
- The dividing lines between items change direction to match the bar: vertical dividers on a horizontal bar, horizontal dividers on a vertical bar.
- Submenus (level 2) of the Tab Bar have an arrow showing the open direction: a bar at the bottom opens upward, a bar at the top opens downward. Vertical bars don’t have this arrow yet.
Position on desktop
The Position field in the Display on desktop box: chooses where the Tab Bar sits on the computer screen.
- Options (pictures, in the order shown in the app): a bar at the center of the bottom edge, floating style (default for a new menu) and flush-bottom style; a bar at the bottom-right corner; a bar at the bottom-left corner; a bar that spans the full width at the bottom; a bar that spans the full width at the top of the page; a thin vertical bar on the right edge; a thin vertical bar on the left edge.
- Four styles tagged Deprecated: these are tall vertical bars that run the full height of the screen, on the left or right edge, from an older version. They still work as before, but they’re no longer maintained, and the app shows a warning when you pick them. Choose another style.
- Default for a new menu: a bar at the center of the bottom edge.
- Applies to: only Tab Bar, every plan, every platform. The field is hidden when you untick Show menu on desktop.
- What shoppers see when you change it: the menu bar moves to the spot you chose on large screens. Phone and computer are set separately: you can keep the bar at the bottom edge on phones and stretch it across the top on computers.
To float the bar away from the screen edge instead of sitting flush, don't choose it here. Adjust the Margin in the Design step instead. See Menu position and margins.
Floating Button position
The Floating Button does not use the row of pictures above. Inside each Display on mobile and Display on desktop box is a separate sub-section with three corner buttons and a field for the distance from the bottom. Phone and computer are set separately.
What all four fields have in common: Applies to only Floating Button, every plan, on Shopify, Wix and other websites. These sections always show, even if you untick Show menu on mobile/desktop. The button is always anchored to the bottom of the screen. There’s no option to place it at the top.
Position on mobile
Chooses the corner the button sits in on phones.
- Options: Bottom-left (left corner), Bottom-center (middle), Bottom-right (right corner).
- Default for a new menu: Bottom-right.
- What shoppers see when you change it: the button moves to the left, middle or right, 16px from the left or right edge. The button’s submenu opens toward the open space: a button on the left opens to the right, and a button in the middle or on the right opens to the left.
Bottom spacing (mobile)
The Bottom spacing field in the Position on mobile section: the distance from the button to the bottom of the phone screen.
- What to enter: a whole number in px, not negative. Default
16. - What shoppers see when you change it: the bigger the number, the higher the button sits above the bottom edge. Raise it when something else is already at the bottom (such as a chat widget or a cookie banner) so the button isn’t covered. You can also leave it empty: Navi+ uses
16.
Position on desktop
Same as Position on mobile, but for the computer screen, inside the Display on desktop box.
- Options: Bottom-left, Bottom-center, Bottom-right.
- Default for a new menu: Bottom-right.
- What shoppers see when you change it: the button moves to the left, middle or right on computers. It doesn’t affect the position on phones.
Bottom spacing (desktop)
The Bottom spacing field in the Position on desktop section: the distance from the button to the bottom of the computer screen.
- What to enter: a whole number in px, not negative. Default
16. - What shoppers see when you change it: the button sits higher or lower above the bottom of the browser window. It doesn’t affect phones.
Frequently asked questions
Why don’t I see a Position field?
The Position row of pictures is only in the Tab Bar. A Floating Button uses Position on mobile/desktop and Bottom spacing. The other menu types choose their spot when you publish.
What if I picked a style tagged Deprecated?
It still works as before, but it’s no longer updated. Switch to a style without the tag.
Other platforms
The steps above are for Shopify — the default way.
Same as Shopify: the position is set in Navi+, and doesn’t depend on the platform.
Same as Shopify: the position is set in Navi+, and doesn’t depend on the platform.