Menu shows twice or the theme menu is still there

When your store shows two menus at the same time, the cause is that the theme’s original menu is still on and runs alongside the Navi+ menu. Check which case below matches your store so you can fix the right thing.

Before you start

• In Navi+, open the menu that’s showing twice and click Publish.
• Check whether the menu is duplicated on desktop, on mobile, or on both. Each case below usually happens on a different device.

Cause 1: Inserting instead of replacing

The Insert after and Insert before options keep the theme’s menu and place the Navi+ menu next to it. To hide the old menu, you need to choose Replace.

Cause 2: The theme separates desktop and mobile menus

Many themes build two separate menu bars: one in the desktop header and one inside the phone drawer. When you replace only one of them, the menu in the other spot stays.

How to tell: on desktop only one menu shows, the one you want, but on a phone you still see the theme’s old menu, or the other way around.

To replace both, enter both CSS selectors for the menu areas in the placement field, separated by a comma, and add a device marker at the end:

.header__inline-menu(D), .menu-drawer__navigation(M)

Here, (D) applies to desktop only, (M) applies to phones only, and leaving it blank applies to both. The two lines above are just examples, because each theme names things differently. To get the exact address of the leftover menu on your store, open the page with Navi+ Live and click the menu you want to remove.

Cause 3: Tapping ☰ opens both drawers

How to tell: when you tap ☰ on a phone, both the theme’s drawer and the Navi+ drawer slide out over each other.

The reason is that the ☰ button in the header still opens the theme’s old menu, while you’ve also created a separate open button for Navi+. You don’t need to hide the theme’s ☰ button. Just let Navi+ control it:

From now on, when shoppers tap ☰, only the Navi+ Mobile Menu opens, and the theme’s drawer won’t open anymore. See details in Put the Mobile Menu on your store and choose how to open it.

Last resort: Hide the extra menu with CSS

If you can’t select the theme’s menu correctly in the placement step, for example because the theme generates another copy of the menu, you can hide the extra part entirely with the menu’s own CSS. See the full guide at Hide the theme’s built-in menu.

In the menu you’re editing, open the Configure tab, scroll down to Custom CSS for this menu, and paste this code:

/*
 * Hide the theme's navigation bar on desktop.
 * Reason: Navi+ has replaced the main menu, but this theme draws
 * an extra copy that the placement doesn't cover.
 */
@media (min-width: 990px) {
  .header__inline-menu { display: none; }
}

Keep it short, with one address and one screen-width breakpoint like above. Remember to change .header__inline-menu to the real address in your theme.

This CSS is stored inside Navi+. When you uninstall Navi+, the CSS is removed too, and the theme’s original menu shows again as normal.

Tried everything and still see two menus?

Your store may have another menu app turned on at the same time. When two apps insert into the same spot in the header, the menu gets duplicated. Try turning off the other app, then reload your store page to see whether the duplicate is gone.

If you still can’t fix it, send us your store address and theme name: How to contact support.