On Shopify, Navi+ prints the menu into the page ahead of time, so the menu appears almost instantly. Hardly anyone sees the loading effect anymore, so you no longer need to set up the placeholder fields below. Leave them empty and the menu works as normal.
Most stores don’t need to change anything in this article. Look at it only if you see the header flicker or jump when a page first opens, which usually happens when a Navi+ menu replaces the theme’s original menu, or when you open a Mobile Menu with a ☰ button the theme already has.
Why does the header flicker when the page opens?
When a shopper opens a page, the theme shows its original menu first. A moment later, Navi+ finishes loading and swaps your menu in over that original menu.
On a fast network the eye can’t catch it. On a slow network, shoppers see the theme’s old menu for a split second, then the header jumps slightly as the Navi+ menu takes its place.
This only happens in 2 cases:
- You use a Mega Menu in place of the theme’s menu: mainly a Desktop Mega Menu, or a Mobile Mega Menu and Icon Menu placed as Replace under Somewhere else.
- You open the Mobile Menu with the theme’s ☰ button through a CSS selector (a snippet that points to that button’s position on the page).
Menu types that don’t touch the theme’s original interface, such as Tab Bar, Floating Button, or a Mobile Menu opened from another Navi+ menu item, never flicker.
Loading effect (optional)
The loading effect is a gray skeleton that shows briefly while the Navi+ menu isn’t ready, so shoppers don’t see a gap or the old menu flash. Since Nov 5, 2026 the menu is printed ahead of time and appears almost instantly, so you hardly need to turn it on.
It only works for a Mobile Menu opened with the theme’s ☰ button and a Mega Menu in Replace mode. In the Publish window there is an Add a loading effect (optional) row; click X to hide it if you don’t use it.
How to turn it on
Go to Theme editor › App embeds › Store Connector, open the Loading effect (optional) group, paste the CSS selector into the matching field, then click Save: Mobile Menu CSS Selector for a Mobile Menu, CSS Selector for Mega Menu Replacement for a Mega Menu.
The selector is the same one you pasted when you put the menu on your site. Separate several selectors with commas; add (M) after a selector if it’s for phones only, (D) if it’s for computers only. Leave both fields empty and the menu still works as normal. The setting is stored per theme, so paste it again if you change theme.
What it looks like on your store
Mobile Menu. A shopper taps ☰ while the page is still loading: a skeleton drawer slides out right away (white background, blinking gray lines), then the real menu swaps in.
Mega Menu Replace. The theme’s menu bar is replaced by a row of gray pills with a light sweeping across, holding the exact spot, then the Navi+ Mega Menu swaps in and the header doesn’t jump.
Advanced: adjust the Mobile Menu skeleton drawer with text
In the Mobile Menu CSS Selector field, type parameters in parentheses, separated by |:
.nut-menu (Device:M | Color:#1a1a1a | Direction:left | Width:85%)
Device:M(phone) orD(computer).Color: the drawer’s background color, as#rrggbb.Direction: the slide direction,leftorright.Width: the width, for example85%or320px.
Any parameter typed wrongly is ignored and the default is used. The CSS Selector for Mega Menu Replacement field only accepts (M) and (D).
Automatic background loading
By default, Navi+ already takes care of these 2 things, with no field for you to turn on or off:
- Loads in parallel with the web page: the Navi+ startup code runs on its own and doesn’t make the page stop and wait.
- Images in submenus aren’t loaded early: an image is only downloaded when the shopper hovers over that menu, so the page stays light when it opens.
When should you turn on the secondary CDN?
Navi+ always stores the menu files on 2 independent server networks (CDNs). If the main network has a problem loading the startup file, the app switches to the backup network on its own.
In the app embed settings there is a Use a Secondary CDN (BunnyCDN) option that makes the backup network the main source. Turn it on only when:
- The Navi+ support team guides you to turn it on, or
- Your shoppers are in a region where the main network is blocked or unstable, so the menu doesn’t show.
This setting doesn’t make the menu load faster. For most stores, leave it off as it is by default. If support asks you to turn it on to test a problem, keep it that way until they tell you it’s fixed.
How to measure page speed properly
Web speed scores often jump around between measurements, even when you haven’t changed anything on the page. To know exactly how much Navi+ affects page load speed, do this:
- Duplicate your current theme and turn off the Navi+ app embed in the copy.
- Test the speed of both themes 3 times in a row, at the same time.
- Take the middle result of each theme and compare them.
Don’t compare today’s score with last week’s score, because the store has had many other changes since then. To understand better how Navi+ runs on a page, read Does Navi+ slow down my store?.
Fixing common problems
The header jumps when the page first opens
Since Nov 5, 2026 this is rare because the menu is printed into the page ahead of time. If you still see it, turn on the loading effect as described above, and make sure to paste the selector into the right field, because Mobile Menu and Mega Menu use two separate fields.
The menu shows a little late on the first visit
When a shopper visits your site for the first time, the browser has to download the menu files fresh. From the next page opens, the browser reuses the saved files, so the menu shows right away. If the menu is slow every time, check whether your level 1 menu items have images that are too heavy. Navi+ already shrinks and compresses images when you upload them, but you should still use light original images from the start.
Other platforms
The steps above are for Shopify — the default way.
The Mobile Menu CSS Selector, CSS Selector for Mega Menu Replacement and Use a Secondary CDN fields are in Shopify’s theme editor, so they aren’t available on Wix. The speed measuring tips above still apply.
Like Wix, the fields above belong to Shopify themes. On other websites, the two loading effect settings don’t exist. If your header flickers when you use the replace method, contact support to get a fix that fits your website.