Hide the theme's built-in menu

You’ve just turned on the Navi+ menu on your site, but the theme’s old menu is still right beside it. This isn’t a bug. It comes from the placement you picked when you clicked Publish. You only need to change one option.

Before you start

• You’re using a menu type attached to the header, such as Desktop Mega Menu, and you’ve put the menu in the header.
• You can see where the theme’s old menu appears on the page.

Why do two menus show?

In the Publish window, Navi+ has 3 ways to place a menu on the page:

If both menus show on the web, you’re probably using Insert after or Insert before.

Switch to Replace to swap out the old menu

If you pick the whole header by mistake, your store also loses the logo, search box and cart. Only pick the small box that wraps the menu items.

When you switch to Replace, the old menu still shows

Some themes create two separate menu copies, for example a horizontal menu bar for computers and a drawer menu for phones. When you replace one, the other still shows. Handle it in one of these two ways:

Option 1: Enter several selectors at once

The CSS Selector field accepts several addresses separated by commas. Add (D) if it only applies to computers, (M) for phones, or leave it empty for both. For example:

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

Just replace the part before the ( with the menu address from your theme.

Option 2: Hide the leftover part with CSS

To hide the extra menu with styling code, open the menu in Navi+, go to Configure > CSS, and paste this code:

/* Hide the theme menu on computers.
   Reason: Navi+ has replaced the menu, but the theme draws another copy in the header. */
@media (min-width: 990px) {
  .header__inline-menu { display: none; }
}

Keep the rule short: target one selector and one specific screen size. That way, when you update the theme later, other parts of the header won’t be hidden by mistake.

Some themes also have a built-in toggle or a way to change the menu directly in the theme editor. Check Online Store > Themes > Customize before you use CSS.

Handle the ☰ button on phones

If you tap the ☰ button on a phone and the theme’s old drawer menu opens along with the Mobile Menu, don’t hide the ☰ button. Instead, set the theme’s ☰ button as the open button for the Mobile Menu by entering the CSS selector of the ☰ button in the open-menu setting. When a shopper taps it, the Navi+ Mobile Menu opens and the old drawer no longer slides out. For the steps, see Put the Mobile Menu live.

Don’t delete the Shopify original menu

You don’t need to delete the original menu under Online Store > Navigation in Shopify, and you don’t need to delete code in the theme. Navi+ replaces the menu on the page without touching the original code. Keep the old menu in place so that if you turn off or uninstall the app later, the theme’s menu comes back and your store doesn’t lose its navigation bar.

Fix common problems

The old menu flashes before it disappears

The browser draws the theme’s menu first, and then Navi+ swaps in its menu. Since Nov 5, 2026 the menu is printed into the page ahead of time, so the flash is almost gone. If you still see it, in the Publish window click Setup on the Add a loading effect (optional) row at the bottom of the window. See how to do this in Settings that keep your menu loading fast and flicker-free.

Hidden on computers but still showing on phones

Each device usually has its own menu frame and its own CSS rules. Add a selector with the (M) suffix for phones, or write one more CSS rule for small screens.

Gone from the web after uninstalling Navi+

• If you hid the theme’s menu with CSS placed inside Navi+, uninstalling the app removes that CSS too, and the theme’s menu shows again.
• If you edited or deleted code in the theme before, restore it from the theme’s version history in Shopify, or use an older copy of the theme that you kept.