Step 3: Handle issues after publishing the menu

Step 3: Handle issues after publishing the menu

Unlike other apps, changes to navigation can greatly impact your customers’ experience and your revenue. Successfully publishing a Navi+ menu is usually not the final step. You may need to handle some of the following issues afterward.

I. Avoid overlapping between the menu and other interface elements (like Cart Panel, Menu Panel...) by Z-INDEX

This is a common issue when your menu overlaps or is overlapped by other interface elements, such as Cart Panel, Menu Panel, or floating apps like Chat Bubble, Loyalty Widget Bubble... You may need to adjust the z-index—a key web property that helps improve user experience.

What is z-index, its meaning, and examples

This is a common issue but very easy to handle when using Navi+. Your website may have many floating elements—see the examples below to recognize them.

Note: These are the current z-index setups on the Dawn theme (Shopify’s most popular free default theme) at this time.

These floating elements are controlled by their own z-index values. The higher the z-index, the more priority that element has in being displayed above others. The tricky part is that there are no fixed rules for z-index values. You can assign any number up to 2,147,483,647. Each theme you use and every app running on your Shopify store can assign their own z-index to floating components—usually based on the developer’s preference. When these elements interact on your website, they may overlap in unintended ways.

Let’s have a little fun 😂: Take a closer look at the screenshot above and you’ll see—yes, it’s a mess, and there are absolutely no rules. There are three developers behind the website you're looking at.

The developer who built the Dawn theme chose a z-index of 3 for the Menu Panel and 1000 for the Cart Panel—completely unrelated, with no clear logic.

Then there’s the developer of the Rivo Loyalty Rewards app—a popular loyalty tool—who picked a z-index of 99999999999, probably without even counting how many nines they typed. Their only goal: make sure the floating “Rewards” button always stays on top, no matter what, even above your Cart Panel.

Meanwhile, the Navi+ developer humbly picked a smaller number—just 5—because we didn’t want to be too aggressive or intrusive. So, what should you do?

Although Navi+ tries to assign a moderate and compatible z-index value when generating templates—especially for Shopify’s free default themes like Dawn, Craft, and Spotlight—it’s very likely that you're using a different or paid theme from a marketplace. In that case, you need to make sure your z-index setting works correctly with that theme.

Step 1: Find the correct z-index of your Navi+ menu

Method 1: Ask Navi+ support (Simplest)

This is the best and most effective way. We can provide you with information about the z-index values of key interface elements such as the Menu Panel, Cart Panel, and any third-party apps you're using, then recommend the best z-index setting for your case.

Don’t hesitate to use the chat box in the bottom-right corner of the screen to talk to a Navi+ supporter. Navi+ is growing, and we truly value your feedback—your issues help guide us to build a better product.

We’re not online 24/7—only 14 hours a day, based on Vietnam time zone. However, as soon as we see your message, we’ll reply right away.

Method 2: Use your browser’s Inspect mode (detailed, but requires some technical knowledge)

So far, there’s no better method for checking this yourself unless you use Inspect mode. This developer tool is available in all modern browsers like Chrome, Firefox, Safari, or Edge. Right-click anywhere on your website and select Inspect to open Inspect mode.

Method 3: Try and test based on our suggestions (Personal experience)

In most cases, z-index problems are rare if you’re not using too many apps. The main issue usually comes from overlaps between your menu and other interface elements like the Menu Panel or Cart Panel.

  • For Navi+ sticky menus like Tabbar or FAB: We recommend keeping the z-index low, around 2 or 3. These menus take up screen space, and it would feel broken or annoying if they covered functional panels like the cart.

  • For Navi+ section menus like Mega menus: If placed at the top (in the header), you can safely set a very high z-index (e.g. 2000000000) to make sure the dropdown submenu isn’t hidden behind other components.

  • For Navi+ Grid menus: z-index has no effect, as the menu is flat and doesn’t have layered depth.

  • For Navi+ Slide menus: z-index should be set very high (e.g. 2000000000) to avoid being hidden behind other elements.

Step 2: Update the z-index of your Navi+ menu

How to update the z-index of the Navi+ menu?

Select the Advanced menu and scroll down to find the Z-index card then update the z-index and don’t forget to click SAVE to apply the changes.

II. Adjust floating button (Chat Bubble, Loyalty Widget Bubble, Sticky menus...) positions

On your web interface, there can be multiple floating elements from different apps. For example, you may need a Navi+ tabbar for main navigation, a Chat Bubble for messaging (from Shopify Inbox or other tools like Tidi, Tawk.to, HubSpot, Intercom, HelpScout, WhatsApp), a Loyalty Widget Bubble for loyalty programs (such as Rivo Loyalty Rewards, Smile.io...), and some may also want additional floating buttons for language switch or accessibility depending on their business.

In this case, simply adjusting z-index as described earlier is not enough because you may need to display 2 or 3 elements simultaneously. If those elements are sticky, they can easily overlap. They also take up too much screen space, especially on mobile devices. Navi+ provide 2 ways to handle this as described below:

Method 1: Group floating elements like Chat Bubble, Loyalty Widget Bubble, FABs, and others from different apps into Navi+ menu items and arrange them in the proper positions.

Currently, Navi+ already supports integrating tools like Shopify Inbox, Tidi... into a Navi+ menu item. We will expand this list over time, and if you have any requests, you can contact us via chat for immediate support. This lets you keep all features functional while optimizing the user experience by reducing floating elements on the screen.

Step-by-step guide to group most floating elements like Chat Bubble, Loyalty Widget Bubble, and FABs into Navi+ menu items (detailed, but requires some technical knowledge)

  • Step 1: Find the CSS Selector (By HTML class, id or attributes) of the floating element. See the guide below for how to find a CSS selector.

{md}https://help.shopifas.com/manual/internal/what-is/common/how-to-find-css-selector.md{endmd}

  • Step 2: Hide the floating element using CSS in Navi+.

// Suppose the CSS selector you found is: #your-css-selector
#your-css-selector {
  visibility: hidden;
}

  • Step 3: Use the following syntax with a Navi+ menu item to simulate clicking the floating element, opening the app window.

// open.clickTo() will simulate clicking a button defined by a CSS selector. 
open:clickTo(#your-css-selector .button)
Method 2: Adjust the positions of interface elements so they do not overlap.

You can use different methods to move floating elements. Some apps, like Shopify Inbox, allow configuring the Chat Bubble’s position relative to the bottom edge, but sometimes this is not enough, and exact pixel values are needed.

You should use Margin to move the floating elements. Locate the Class Selector (By class or ID) of the element and add CSS in Navi+ to adjust its position. To learn how to identify a CSS selector, please refer to the guide above.

// The code below will add a margin to the floating buttons: 60px from 
// the bottom and 42px from the right.
#your-css-selector {
  margin-bottom: 60px; 
  margin-right: 42px;
}

Navi+ also supports setting Margin/Padding for the menu. Many users prefer using Padding to leave space for floating elements, as in the example below, which you can also follow.

PreviousStep 2: FAQ - PublishNextStep 4: Go live, monitor, and optimize

Last updated