Which themes Navi+ works with

Navi+ works on every Shopify theme because the app doesn’t edit the theme’s files. Themes differ in just one way: how easy it is to find the right spot for the menu.

Why does Navi+ work on every theme?

Navi+ menus are drawn by the app itself, loaded from the Navi+ CDN, then either float above the page or sit inside it. The app doesn’t write to your theme files, doesn’t change the code, and doesn’t override any theme feature. When you turn off or uninstall Navi+, the theme goes back to exactly how it was.

For each menu group:

• Tab Bar and Floating Button float independently on the screen and don’t need to attach to any theme element, so they work on every theme as soon as they’re on.
• Desktop Mega Menu, Mobile Mega Menu and Icon Menu sit inside the page, so they need to know where to go. Mobile Menu needs to know which button opens it. That spot or button is set by a CSS selector, which is the address that identifies that area on the page. Every theme has these areas; they’re only named differently.

For details on where each type goes, see Where each menu type shows on your store.

Which themes already have a placement?

Navi+ has already saved the CSS selector addresses for the header bar, the main menu and the ☰ open button for 331 Shopify themes. When you place a menu on your page, the app automatically detects the running theme and fills in the field, so you don’t need to type it yourself.

Below are the settings for a few popular themes for reference. You don’t need to copy them by hand:

Theme	Header	Main menu that can be replaced
Dawn and related themes (Craft, Sense, Refresh, Studio, Spotlight, Origin, Crave, Colorblock, Ride, Taste, Publisher, Trade)	.section-header	.header__inline-menu
Horizon	.header-section	header-menu
Impulse	.header-wrapper	.header-item--split-left ul.site-nav
Prestige	x-header	.header__primary-nav
Warehouse	#shopify-section-header	nav.nav-bar
Turbo	#header	header nav ul
Symmetry	.section-header	#proxy-nav

To see the full list, open the menu’s Publish panel in the app. The theme selection shows the matching address for your theme.

When can the built-in placement be off?

The addresses for these 331 themes come from each theme’s demo store. Most match right away, except in a few cases:

• The address matches several elements on the page, so Navi+ may pick the wrong spot. If you’re choosing to replace the theme’s menu, Navi+ switches to inserting after it, so it doesn’t hide other content by mistake. At this point, both menus may show on the page.
• Some themes with unusual layouts don’t have complete settings yet, for example themes with a vertical side menu, demo stores with an empty menu, or themes where the ☰ button can’t be found.
• Some themes have no horizontal menu bar on desktop, only a ☰ button. With these themes, you can’t use the replace option. Instead, only insert a new menu or use a Mobile Menu.

Also, if you’ve ever edited your theme’s code, the addresses on your real store may differ from the demo store. If your theme isn’t in the list or the menu shows in the wrong place, use Navi+ Live to click the element directly on the page, or contact support and we’ll find it for you.

When can the menu clash with the theme or other apps?

The theme itself doesn’t block Navi+, but you may run into these three situations:

• The theme’s existing ☰ button opens its drawer: Some themes handle taps on the ☰ button themselves. Instead of adding a second button on screen, set Navi+ to open as soon as the shopper taps that ☰ button. See how in Put the Mobile Menu on your store and choose how to open it.
• Sticky header when scrolling, or a transparent header over images: A menu placed inside the header must follow the header bar when the shopper scrolls. If you see the menu out of place, see how to fix it in Menu in the wrong place or breaking the header.
• Another app changes the same element: Two apps fighting over one header bar often make the screen flicker or show two menus stacked. Keep only one navigation app per spot. If the menu just covers a chat button or a notification in a corner, see how to handle it in Menu overlaps chat widgets, cookie banners or the header.

You can also have a Navi+ menu item open the theme’s own menu, cart and search box with the links open:ThemeMenu, open:ThemeCart and open:ThemeSearch. Navi+ automatically detects the running theme, so you don’t need to select the theme again.

Can’t turn on the menu for a Canvas theme?

Canvas is Shopify’s new tool for designing stores with Sidekick. If a theme created or duplicated in Canvas doesn’t let you turn on the app embed yet, or Navi+ doesn’t recognize that theme, the menus you’ve already created are still kept.

To use it right away, publish a regular theme, such as your previous theme or a copy of it, then turn on the app embed as usual. Once the Canvas theme allows the app embed, just turn it on again. If you still can’t turn on the app embed, see Menu not showing on your store.

When you update your theme

Each time you update, the theme rewrites the header bar’s code. Floating menus aren’t affected, but menus placed inside the page may lose their anchor point. In that case, turn the app embed back on if the new theme version isn’t on yet, then open the Publish panel and select your theme name again to get the new address. See details in Menu disappeared after changing or updating your theme.

A white gap when opened in the Google app on iPhone?

When shoppers open your store inside the Google app on iPhone, a stray white strip sometimes appears below the Tab Bar. This is a bug in the Google app itself, not caused by Navi+, and it also happens with other apps that pin a bar or float a button to the bottom. The white space only appears when the page first opens and disappears as soon as the shopper touches or lightly scrolls the screen. It doesn’t happen in Safari or Chrome. For now, Navi+ can’t fully fix this bug from the Google app’s side.

Need help finding a placement for your theme?

Just send us the name of your theme and what you want the menu to do. If your theme isn’t in the list yet, we’ll check it and find the address for you. See How to contact support.

Other platforms

Shopify Wix Other website

The steps above are for Shopify — the default way.