Navi+ places the menu where you set it in the Publish panel. If you pick an area that’s too wide, the menu replaces the whole header. If you pick the wrong insert direction, the menu jumps above or below where you want it.
Before you start
- Open the broken menu in Navi+ and go to the Publish panel. At the top is the Navigation selector map, which lists the areas of your theme that Navi+ recognizes, such as the header or main menu.
- Open Navi+ Live on your store page too if you want to click the placement spot yourself.
The logo and cart disappear after turning on the menu
Right after you turn on the menu, the theme’s logo, search box and cart all disappear, and only the Navi+ menu is left at the top of the page.
The reason is that you chose Replace on the whole header block. Since the header block includes the logo and the cart, Navi+ swapped the entire block for the new menu.
To keep the logo and cart, pick a smaller area again: the one that holds the old menu bar. See the steps in Pick the right container for your old menu again below.
The menu sits above the header or jumps to the wrong spot
The menu shows up, but it sits right above the header instead of below it, or squeezes in next to the logo instead of sitting in the middle of the navigation bar.
The Insert before and Insert after options keep the existing area on the page and insert the Navi+ menu right before or right after it. If you pick the wrong direction or the wrong area, the menu lands in the wrong spot.
Adjust it to the spot you want:
- To place the menu right below the header: select the header row, then click Insert after.
- To fully replace the theme’s old navigation bar: select the main menu row, then click Replace.
- If the menu is only slightly off: try switching between Insert before and Insert after before looking for another area.
If several areas on the page share the same CSS selector, Navi+ attaches the menu to the first one. Choose a more specific address so the menu doesn't attach to the wrong place.
Looks right on desktop but breaks on mobile
The menu looks right on desktop, but on a phone it covers the logo, or the category bar drops below the desktop header.
This usually has 3 causes:
- Your theme has separate headers for desktop and mobile, so the address you chose matches only one of them.
- You’re using a Desktop Mega Menu for phones too. This menu type is only for wide screens, so it can’t replace the phone menu. On phones, create a separate Mobile Menu or Mobile Mega Menu.
- For a Mobile Mega Menu, select the theme’s header area and choose Insert after, and set the menu to show only on phones.
When you fix it, remember that the address in the Publish panel only applies to the device for that menu type: Desktop Mega Menu goes with desktop, and Mobile Mega Menu goes with phones. Choose the area for the device you’re viewing, then reopen the store on a real phone. Don’t just check in a desktop browser.
Pick the right container for your old menu again
The rule is to choose the smallest area that just surrounds your old menu. The area must be narrow enough not to touch the logo or cart, but wide enough to hold all the menu items.
-
Open the menu in Navi+, click Publish, and look at the Navigation selector map at the top of the panel.
PublishMethod 1: Put the menu into a menu placementNo code needed — Navi+ already found where it fits on your theme.Turn onSTEP 1Enable Navi+ in Theme → App embeds Store Connector is on in Dawn. Review
This is Shopify’s standard method - safe and removable anytime.STEP 2Choose a menu placementWhere this Mega Menu shows up on your store.Replace your main menuYour desktop navigation is swapped for this Mega Menu. Logo, search and cart stay.Add below your headerA full-width bar inserted right under the header. Your navigation stays.Somewhere elseBefore, after or in place of any element you choose (CSS Selector).Placement found by Navi+header navSTEP 3Optimize speed & experience SetupSTEP 4Test this menu Open TestMethod 2: Insert as an App block in your theme editor -
Click the main menu row of the main menu instead of the header row to copy its address, then paste it into the CSS selector field.
-
Choose Replace to swap out the old menu. If you only want to add a category row and keep the theme’s menu, use the header row and choose Insert after.
-
Click Save at the top and reload your store page.
Don’t see a matching row in the suggestions? Open Navi+ Live on your store and click the old navigation bar directly. If the Live selection box covers too wide an area, click a smaller area inside it.
Still off after all the steps?
If the menu is still in the wrong place, try these 3 steps in order:
- First switch between Replace and Insert after, then change the CSS selector address.
- Temporarily uninstall or turn off other apps that also edit the header, such as announcement bars or other menu apps, to rule out conflicts.
- Send us your store address and theme name, following the steps in How to contact support.
Other platforms
The steps above are for Shopify — the default way.
Wix doesn’t have the Menu in Section app block, so Navi+ places the menu with a CSS selector. Because the area you need is on your Wix page, open Navi+ Live to find the address, and still follow the rule of choosing the smallest area around your old menu.
WordPress and other websites don’t have the Menu in Section app block, so the menu is placed with a CSS selector only. The theme-based Navigation selector map suggestions are only on Shopify; on other websites, use Navi+ Live to find the address yourself, and still choose the smallest area around your old menu.