Menu overlaps chat widgets, cookie banners or the header

The bottom corner of a phone screen gets crowded fast when a chat button, a back-to-top button, a cookie banner and a menu all show in the same spot. Here are ways to rearrange them so nothing covers anything else.

Before you start

• Open your store on a real phone and go to the exact page where the layout is covered.
• Note the name of the app that’s clashing with the menu, such as Shopify Inbox, Tidio, WhatsApp or a cookie banner app.

See which one is covering which

Look at the screen to see whether the Navi+ menu is hidden behind the other widget or sitting on top of it. Each case is handled differently:

• If the Navi+ menu is hidden: move the menu or raise its layer above.
• If the Navi+ menu covers something important, such as the cookie consent box or the chat window: move the menu, lower its layer, or merge that button into Navi+.

Move them so they don’t touch

In most cases, nudging one of the two a little is enough to stop the overlap.

• Floating Button: go to the Configure step, open the Display on mobile tab for phones or Display on desktop for computers. There, change the display corner to left, center or right, then adjust Bottom spacing to raise the button above the bottom edge.
• Tab Bar: this bar spans the full width of the screen, so it can’t move to another corner. Either open the other widget’s settings and raise it above the bottom edge, or go to Configure > Scroll effects and turn on Hide when scrolling down on Mobile screen so the Tab Bar hides itself when shoppers scroll down.
• Mobile Mega Menu and Icon Menu: these two sit inside the page content. If a sticky header covers the menu when scrolling, you can turn off the header’s sticky mode in your theme, or change the insert position to Insert after instead of Insert before.

To fine-tune the menu’s margins, see Menu position and margins.

Change the layer order with Z-index

When two elements sit in the same spot, the browser uses the z-index number to decide which one is on top. A higher number sits above a lower one.

Every menu has a Z-index field in the Configure step, and it also shows right outside the menu list. The default value is 50. You can enter a number from 0 to 2147483647.

How to choose the right number:

• When another widget covers the Navi+ menu: enter a number higher than that widget’s number. Each theme and app sets its own number, and chat widgets usually set very high numbers.
• When the Navi+ menu covers something shoppers need to tap, such as a cookie bar or a checkout box: lower the Navi+ number instead of raising the other element’s number.
• For the Mobile Menu drawer and the Desktop Mega Menu dropdown: set a very high number, because when opened, the menu needs to cover the whole page.
• For Tab Bar and Floating Button: keep the number moderate. These two stay fixed on screen, and if the number is too high, they’ll cover the cart drawer when shoppers open the cart.
• For Icon Menu: this menu type sits inside the page content flow, so changing the z-index has no effect.

To check the other widget’s z-index yourself on a computer, right-click the widget on the web page, choose Inspect, and look for the z-index line. If that’s not familiar, just message the support team at the end of this article.

Merge chat buttons into one Floating Button

Instead of several separate floating buttons in the corner of the screen, you can create a Floating Button to gather Shopify Inbox, WhatsApp, calls, SMS, Messenger and email into one button. Once it’s done, turn off the separate floating buttons and the screen is clean right away.

With some chat apps, shoppers can tap a menu item in the Floating Button to open the chat window directly:

• Shopify Inbox: enter open:Inbox in the link field of the menu item. When a shopper taps it, the Shopify Inbox chat window opens, and Navi+ automatically hides Inbox’s default floating button so they don’t overlap.
• Tidio: you can add a short JavaScript snippet to the menu’s own JavaScript box in the Configure step, so the Tidio chat window opens from the Navi+ menu item. If you want to keep the Tidio button separate, raise it above the Tab Bar by adding a custom CSS line such as #tidio-chat-root { margin-bottom: 50px !important; }.

The exact setup depends on how each chat app is installed on your store. If you’re not sure how to do it for your chat app, just send us the app’s name.

Tab Bar covers the bottom of the page

By default, Navi+ adds an empty space at the bottom of the page equal to the Tab Bar’s height, so it doesn’t cover the footer. However, there are two exceptions:

• You’ve turned on the option to hide the Tab Bar when scrolling. Because the bar isn’t always fixed on screen, Navi+ won’t keep the space at the bottom of the page.
• Another app also places a fixed bar along the bottom of the screen, such as a quick-buy bar like Add to cart. In that case, Navi+ only keeps the Tab Bar above it, and can’t push the other app’s bar up. If that app has a bottom margin setting, increase that number.

A white strip below the Tab Bar when opened in the Google app on iPhone

When shoppers open your store from the Google app on iPhone, they sometimes see a white strip right below the Tab Bar. This is a display bug in the Google app on iOS that affects every fixed bar or floating button at the bottom of the screen, not an error from Navi+.

Navi+ has minimized this as much as possible: if the white strip appears, it only shows briefly and disappears as soon as the shopper touches or lightly scrolls the screen. If they open the store in Safari or Chrome, they don’t see it at all. You don’t need to change any settings in the menu.

Still overlapping?

Send a screenshot, your store URL and the name of the app that’s overlapping to the support team, following How to contact support. In most cases, just adjusting the z-index or adding a few custom CSS lines in the menu fixes it.

Other platforms

Shopify Wix Other website

The steps above are for Shopify — the default way.