Guide to Adding a Loading Effect for Menus Replaced by a Navi+ Menu

The ability to replace (insert before or after) a Shopify website’s default menu with a Navi+ menu makes Navi+ incredibly versatile and flexible. You can embed Navi+ anywhere on your website while retaining all navigation features. Whether it’s a mega menu completely replacing the main menu or adding a dropdown next to the theme’s default buttons, Navi+ supports these use cases powerfully, effortlessly, and without limitations.

Due to Shopify’s rendering mechanism, which prioritizes displaying pre-built theme elements such as default menus, there is a slight delay when using Navi+ to replace (or insert before/after) the default menu. The browser must wait for the default theme menu to load before Navi+ can execute its replacement functionality. During this brief moment—usually only a few hundred milliseconds—users might notice a flicker, which could impact the experience for those with high standards for smooth interactions.

Solution:

1. Hide the default theme menu content using CSS:
   Add a snippet of CSS code directly into the theme. Why do this? Embedding the code directly into the theme ensures it runs almost instantaneously, imperceptible to the human eye. While adding the code via Navi+ is possible, it introduces a slight delay, which may not be ideal.
2. Add a loading skeleton effect using the ::before pseudo-element:
   By applying a skeleton-style loading animation to the default theme menu, you can significantly improve the perceived experience during the transition.

Below is a sample CSS snippet that you can customize for your theme. If you need assistance, feel free to contact Navi+ Support, and we’ll be happy to help.

.list-menu--inline {
   display: block;
   color: transparent;
   min-height: 24px;
   height: 0px;
}

.list-menu--inline::before {
   content: url(https://naviplus.b-cdn.net/naviplus/images/loading/loading_mega_ff.webp);
   height: 24px;
   margin-left: 48px;
   padding-top: 8px;
}

.list-menu--inline > * {
   visibility: hidden;
}

header.header {
   margin-top: 16px;
}

Explanation:

.list-menu--inline is the class of the default menu being replaced.
https://naviplus.b-cdn.net/naviplus/images/loading/loading_mega_ff.webp is the URL of the animated image used for the skeleton loading effect.

You can choose one of the following styles:

• https://naviplus.b-cdn.net/naviplus/images/loading/loading_mega_ff.webp – Suitable for replacing mega menus in dark mode & light mode.