Menu position and margins

Tab Bar, Floating Button and Mobile Menu are the three menu types that let you choose a position right in Navi+. This article shows you how to place each menu type in the right corner of the screen on phones and computers.

Before you start

• Create the menu first. You can change its position at any time after you create it.
• Desktop Mega Menu, Mobile Mega Menu and Icon Menu have no position option in this article. See Other menu types for them.

Set the Tab Bar position

The positions you can choose:

• On phones, there are 6 pictures: the bar flush to the bottom of the screen by default, the bar flush to the top of the screen, or a small bar in the middle or at the bottom corner of the left or right edge.
• On computers: a bar in the middle of the bottom of the screen in a floating style and a flush style, placed in the bottom-left or bottom-right corner, stretched across the full width at the bottom or top of the page, or a thin vertical bar along the left or right edge. Click each picture and look at the preview beside it to choose the style that fits your shop.
• Four positions on computers are labeled Deprecated. These are the tall full-height vertical bars from an older version, and they’re no longer supported.

To turn the menu off on phones or computers, untick Show menu on mobile or Show menu on desktop in the same tab.

Set the Floating Button position

Floating Button doesn’t use a picture grid. It has separate settings for phones and computers:

Make the Tab Bar float away from the screen edge

Whether a Tab Bar sits flush against the edge or floats apart from it isn’t two different menu types. You just add a margin around the frame, and the bar pulls away from the screen edge.

If you enter a single number, the same distance applies to both phones and computers. To set a different number for each, enter it as 8 | 24 to get 8px margin on phones and 24px on computers.

Choose the slide direction for Mobile Menu

Mobile Menu is a panel that opens when a shopper taps the ☰ button, so you choose the slide direction instead of a fixed position.

The app shows only pictures, not names. The table below gives names to the 7 pictures, in the same order they appear in the app:

Direction	How the menu opens
Left to Right	Slides in from the left edge. This is the default
Right to Left	Slides in from the right edge
Top to Down	Slides down from the top of the screen
Down to Top	Slides up from the bottom of the screen
Fullscreen	Covers the whole screen
Full popup	Appears as a large dialog box in the middle of the screen
Fix on left	Always shown fixed on the left edge, with no ☰ button needed

Three things to know when you choose a slide direction:

• On computers, only Left to Right and Right to Left look different. On a computer, Top to Down, Down to Top, Fullscreen and Full popup all slide in from the left, the same as Left to Right. These four directions only take effect on phones.
• When you choose Fix on left, two more switches appear: Display a fixed menu on desktop, which is on by default, and Display a fixed menu on mobile. Think carefully before you turn on the phone switch, because a fixed menu takes up a lot of space on a small screen.
• The slide direction also decides how the width is applied when you place the menu on the page as a visible menu, instead of a button that opens it.

Other menu types

Desktop Mega Menu, Mobile Mega Menu and Icon Menu don’t float freely on the page. Their positions depend on where you choose to place them when you publish. For details, read Where each menu type shows on your store.

Common questions

Why can’t I see the Position option?

That’s normal. The Position option only appears on Tab Bar. Floating Button uses its own Position on mobile and Position on desktop options. Mobile Menu uses Main menu Slide Direction. The other menu types choose their placement when you publish.

What if I choose a position marked Deprecated?

That position still works as before, but it’s no longer updated, and the app shows a warning when you select it. To be safe in the long run, switch to a position without the Deprecated label.

The menu is in the right place, but it shows on the wrong pages. Why?

Screen position and the pages where the menu appears are two different settings. To choose which pages show or hide the menu, read Choose pages, devices and shoppers who see the menu.

Other platforms

Shopify Wix Other website

The steps above are for Shopify — the default way.