In many cases, you’ll need to use multiple applications embedded on your website. This can make an usual usability issue as interface elements may overlap (see the picture below). A simple example is when you frequently use a chat application like Shopify Inbox or WhatsApp. Typically, these chat apps occupy a prominent position at the bottom right corner of the phone screen. When you decide to use Navi+ to significantly enhance navigation on your website, this issue arises. Here are some ways to address this problem.
Padding and margin are widely used and powerful tools in technology, especially in HTML5/CSS. By setting the padding according to the position of that area, you can avoid overlapping of applications. You can also set the distance from the Navi+ menu to the edges by adjusting the margin.
Although the Bottom Bar is the most effective tool to lead users, used by almost all mobile native apps, or mobile web (slower), sometimes you may want to place your Navi+ menu in a different position such as the top (Top Bar), right/left (Support Bar), floating above the interface (Float action button). Or you can combine them for the best navigation efficiency. Check out the following options from Navi+ to understand how to do it, sometimes it only takes 1s, and you’ll solve your problem.
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. See picture below to undertand more.
The default z-index for the Navi+ menu is set to 50 for all, as we ‘do not consider ourselves more important than other apps,’ but 50 is also the number sufficient to display well on all Shopify themes. Sometimes you may need to adjust the z-index of your Navi+ menu in the following cases:
-
When you use multiple Navi+ menus on one page and you want them to overlap, but one menu appears above the others.
-
When there are other objects/apps overlapping your Navi+ menu, in which case, the z-index will resolve all.
There’s a challenging question: what z-index should you set up for your Navi+ menu to avoid overlapping as desired? If you have multiple Navi+ menus, you can arrange them according to your preferences without worrying – that’s why we’re building Navi+ to be as versatile as possible for current ‘floating applications’ on Shopify.
If you need to set up the z-index for your Navi+ menu to handle conflicts with other apps, you can search for your z-index from a minimum of 0 to a maximum of 2,147,483,647. This may seem a bit difficult, but it’s the easiest and best way because the z-index won’t affect your interface display other than the issue you’re facing. If you’re experienced with CSS and HTML debugging – this is easy, just turn on inspect mode to see what z-index the conflicting app has. Or, the easiest way, simply click on the Crisp chat icon to chat with a Navi+ advisor; we’d be happy to assist you with this issue.