Z-index

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?

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.