Small updates to the menu interface

By default, Navi+ checks the current page URL to show the active state on the menu (using a gray background). This helps your customers navigate more easily.

However, the active state is not always necessary, especially on wide desktop screens where there are other ways to indicate "where you are," such as breadcrumbs. Sometimes, you may want to remove the active state to make the menu look cleaner.

Here’s how to do it:

Method 1: If you want to apply it only to this menu only, the CSS code is as follows (paste it into the Internal Stylesheet / CSS box):

ul li.navi-active {
  background: initial;
}

Explanation: This adds a CSS rule like #SF-123456789 ul li.navi-active { background: initial; } to the page, applying only to this menu (with embedID SF-123456789) and not affecting other menus.

Method 2: If you want to remove all active effects across all Navi+ menus, use the following code (paste it into the Global Stylesheet / CSS box):

.naviItem ul li.navi-active {
  background: initial;
}

Some mega menus can be very tall. In that case, expanding a level 3 menu may not leave enough space. When this happens, you should pin the level 3 menu to the top instead.

Paste it into the Internal Stylesheet / CSS box:

ul.children[menulevel="2"] li.child.is-parent.menu-expand {
  position: initial;
}

ul.children[menulevel="2"] li.child.is-parent.menu-expand ul.children[menulevel="3"]{
  top: 0px;
}

Navi+ menus support up to 3 levels. In the "Design" tab, you can only configure the style for 2 levels, and there is no direct option to set font size or icon/image size for level 2 and level 3 menus. So how can you do that?

Answer: In most cases, the font size for level 1 and level 2/3 should be the same — this is a best practice in design. However, you can still apply custom CSS to define the font size for level 2 and level 3 in your Navi+ menu.

// Customize the text style of level 1 menu items
ul > li.item > .inner .name {
    font-size: 14px;
    color: red;
}

// Customize the text style of level 2 menu items
ul.children[menulevel="2"] > li.child > .inner .name{
     font-size: 16px; 
     color: blue;
}

// Customize the text style of level 3 menu items
ul.children[menulevel="3"] > li.child > .inner .name{
     font-size: 13px; 
     color: green;     
}

I. Why smaller image sizes are better for SEO and user experience?

Using smaller image sizes helps your website load faster. Search engines like Google consider page speed an important ranking factor, so optimized images can improve your SEO.

Faster loading also makes the website smoother and more enjoyable for visitors, especially on mobile devices or slower connections. This means users are more likely to stay on your site and continue exploring your products.

II. How does Navi+ process your images?

Navi+ first uploads your image in its original size. Then it compresses the image with an optimized algorithm and reduces the display size. This size is carefully chosen by Navi+ to be ideal for both user experience and SEO, since images in menus are usually thumbnails or icons that need to be small and load quickly.

Note: For small images like logos or icons, Navi+ does not compress them to preserve sharpness.

After that, Navi+ stores your image on BunnyCDN — a powerful content delivery network (CDN) for images, JavaScript, CSS, and more. BunnyCDN provides extremely fast loading speeds through its global server network. This ensures your website can handle millions of visits without slowing down or causing delays.

III. What should I do if I want to keep my images at their original quality?

In some special cases, you may want Navi+ not to modify your image quality—otherwise, the compression could reduce the quality you expect, for example, some important product images. In this case, you need to upload the image directly to Shopify and provide the link to Navi+ to keep the original quality.

Step 1: Prepare your image (manual process) Prepare your image as desired and rename it for SEO optimization. (Navi+ will only rename images for SEO if uploaded through the Navi+ tool.) You should also compress the image to a reasonable size—ideally a few hundred KB. You can use Shopify’s Image Resizer here: https://www.shopify.com/tools/image-resizer.

Step 2: Upload to Shopify Right-click on the menu Content, select Open link in new Tab, then go to Files. Drag and drop the image prepared in Step 1. Once uploaded, find your file in the list and click the link icon to copy its URL. This URL will be used in Navi+ for uploading the image.

Step 3: Use the image URL in Navi+ Paste the URL obtained from Step 2 into Navi+ using the Upload Image tool.

Why do you need to do this? Isn’t Navi+ already fast?

Navi+ is very fast. It is fully deployed on a leading CDN with very low latency (around 100ms) and can serve millions of customers without slowing down.

However, Navi+ still runs within the Shopify ecosystem. Shopify has its own loading rules:

1. Shopify prioritizes loading its own resources first.

2. Then Shopify loads the theme content.

3. Finally, Shopify loads app content, but not in any specific order.

This means if you are using multiple apps, Navi+ may sometimes be loaded later than expected. That’s why it can feel slower in certain cases.

What is my solution?

Add the following code at the beginning of the header section, usually in the header.liquid file. This code fully replaces the "Turn on Navi+ on App Embeds" option for publishing the menu, but it gives Navi+ higher loading priority compared to other apps:

Extremely important: make sure to set the _sh variable correctly for your domain (always in the format yourdomain.myshopify.com).

<!-- Navi+: Insert directly ----->
<script>
var _sh = 'thesilkywayhungary.myshopify.com';
var _cdn = 'https://naviplus.b-cdn.net/naviplus';  

if (!window._naviVer) window._naviVer = Math.random(); 
fetch(_cdn+"/data/json/"+ _sh.split('.')[0] +".info.json?v=" + window._naviVer).then(r=>r.text()).then(console.log("Navi+ theme: "+ _cdn +"/data/json/"+ _sh.split('.')[0] +".info.json?v=" + window._naviVer));

if (!window._naviLoaded) {
  console.log("Navi+ theme: Loading Navi+!"); 
  document.body.insertAdjacentHTML('afterbegin', '<div class="naviman_app" id="naviman_app"></div>');
  fetch(_cdn+'/golive/version.json')
    .then(r => r.text())
    .then(v => {
      const s = document.createElement('script');
      s.src = 'https://cdn.jsdelivr.net/gh/khoipn/naviplus-shopify@main/' + v.trim() + '/uigen.min.js';
      s.async = true;
      s.setAttribute('shop', _sh );
      s.setAttribute('noembed', '1');      
      document.body.appendChild(s);
    });
  window._naviLoaded = true;
}
</script>
<!-- Navi+: Insert directly ----->

Add a loading effect for a CSS selector

This applies only when you publish a menu by inserting/replacing it into a CSS selector (for menu types like Session, Mega Menu, or Grid Menu) or when you assign a trigger to a CSS selector (for Slide Menu).

Add the following code to the header to create a subtle blinking loading effect while the Navi+ menu is being assigned to the CSS selector. The effect disappears once the menu assignment is complete, providing a smooth visual effect and preventing users from clicking the CSS selector before the menu is fully loaded. This can help avoid rare duplicate event issues.

Extremely important: Pay attention to the function Navifas.waitClickToOpen("#Details-menu-drawer-container"); where #Details-menu-drawer-container is the CSS selector. Make sure to replace it with the selector for your own menu.

<!-- Navifas: Optimize Navi+ Performance ----->
<style>
@keyframes subtle-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}
._navi_loading {
  background: rgba(128,128,128,0.05);
  border-radius: 8px;
  animation: subtle-pulse 0.8s ease-in-out infinite;
  pointer-events: none;
}
</style>
<script>
window.Navifas = window.Navifas || {};
Navifas.waitClickToOpen = selector => {
  const i = setInterval(() => {
    const el = document.querySelector(selector);
    if (el) {
      el.classList.add("_navi_loading");      
      clearInterval(i);
    }
  }, 100);
};

Navifas.waitClickToOpen("#Details-menu-drawer-container");
</script>
<!-- Navifas: Optimize Navi+ Performance ----->