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.

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.

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: Choose the right z-index for your menu

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.

Here are some ways to choose the correct z-index for your menu:

Option 1: Ask Navi+ support

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.

Option 2: Use your browser’s Inspect mode

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.

Option 3: Try and test based on our suggestions

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.

3.1.2. Điều chỉnh vị trí của các floating button

3.1.3. Gom chúng vào trong Menu của Navi+

3.1.4. Điều chỉnh z-index của các floating elements khác.

PreviousFAQ - Choose template NextStep 4: Go live, monitor, and optimize

Last updated 3 days ago

Step 3: Handle issues after publishing the menu

3.1. Avoid overlapping between the menu and other interface elements