The Desktop Mega Menu sits right in the header at the top of the page, so clicking Turn on alone won’t make the menu appear. You also need to tell Navi+ where to place the menu in the header. This article shows you how to do that on Shopify.
Before you start
- You’ve turned on the Navi+ app embed on the theme you use.
- You’ve created the Desktop Mega Menu and added a few menu items.
- You only need one of the two methods below: choose the spot in the Publish window, or drag the Menu in Section app block into the theme editor.
Method 1: Choose the spot in the Publish window
Navi+ detects the theme you’re using and suggests suitable spots in the header, so you usually just click to choose instead of typing code.
-
In the Shopify admin, go to Apps > Navi+, open your menu, then click Publish. Look at the app embed line at the top of the window. If Navi+ isn’t turned on in the theme yet, click the Enable Navi+ in button with the theme name to open the theme editor, turn Navi+ on, then click Save at the top.
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 embedsNot enabled yet Enable Navi+ in Dawn
Not enabled yet — the menu cannot show until Navi+ is on in your theme. View guide
This is Shopify’s standard method - safe and removable anytime.1App embed must be onSTEP 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 Turn on button at the right of the window. The Status label changes from OFF to ON and the app saves automatically. If you haven’t chosen a spot in step 3, the app asks you to choose one before it turns on. Turning on alone doesn’t show the menu on your store.
PublishMethod 1: Put the menu into a menu placementNo code needed — Navi+ already found where it fits on your theme.Turn offSTEP 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 - Under Choose a menu placement, click a placement card:
- Replace your main menu: swaps the theme’s menu bar for the Desktop Mega Menu. The logo, search bar and cart stay where they are.
- Add below your header: inserts a new menu bar across the full width, just below the header. The theme’s old menu stays as it is.
- Somewhere else under Advanced: replaces, inserts before or inserts after any part of the page, using a CSS selector. A CSS selector is the address of that element on the web page.
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.3Replace your main menuAdd below your headerA full-width bar inserted right under the header. Your navigation stays.4Add below your headerSomewhere elseBefore, after or in place of any element you choose (CSS Selector).5Somewhere elsePlacement found by Navi+header navSTEP 3Optimize speed & experience SetupSTEP 4Test this menu Open TestMethod 2: Insert as an App block in your theme editor -
If you choose Somewhere else, paste the spot’s address into the CSS Selector field. If you don’t know where to get this address, read Navi+ Live: place the menu in the right spot.
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.Insert afterReplaceInsert beforeReplace 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).CSS Selector (How?).site-header4STEP 3Optimize speed & experience SetupSTEP 4Test this menu Open TestMethod 2: Insert as an App block in your theme editor -
If you change to a different spot after turning on the menu, click Save to keep the change. Finally, open your store on a computer to check that the menu is in the right place.
STOREHomeShopCollectionsAboutContactClothingT-shirtsHoodiesJacketsPantsShoesSneakersBootsSandalsSlippersAccessoriesBagsHatsSocksBeltsNew seasonDesktop Mega Menu replaces the old menu bar in the header
If the window says it can't find the spot, click Find it in Live mode, then click the part you want on the store that opens. For details, see Navi+ Live: place the menu in the right spot.
Method 2: Drag the app block into the theme
This method doesn’t need a CSS selector, and you can see exactly where the menu sits on the page while you drag.
-
In the Publish window, click the collapsed Method 2: Insert as an App block in your theme editor row to expand it, then click Menu ID to copy the menu code.
-
In the Shopify admin, go to Online Store > Themes > Customize. In the header section on the left column, click Add block, then choose Menu in Section in the Apps group.
Home page Header Image bannerMenu in SectionNavi+ Menus3Menu in Section Featured collection Add block2Add blockSTOREHomeShopCollectionsAboutContact -
Paste the Menu ID you copied into the block’s setting field, then click Save at the top.
If your theme doesn’t let you add an app block where you want, switch to Method 1.
Replace or insert: what’s the difference?
| Replace | Insert before or after | |
|---|---|---|
| The theme’s old menu | Hidden. The Navi+ menu takes its place | Stays. The Navi+ menu shows right next to it |
| Best when | You only want one menu | You want a second menu bar, or you’re testing placements to compare |
| What to avoid | If you pick a box that wraps the whole header, you also lose the logo and cart | Shoppers see two menus at once if you haven’t hidden the theme’s menu |
| Extra setup | Turn on the anti-flicker placeholder option below | None needed |
Which method should you choose?
- Want just one tidy menu in the header: choose Replace your main menu in Method 1.
- Happy with the theme’s existing menu and only want to add a category bar below it: choose Add below your header.
- Want to place the menu in a specific spot, aligned to each area on the page: choose Somewhere else with a CSS selector.
- Don’t want to touch CSS selectors: drag the app block into the theme as in Method 2.
You can turn on both methods at once, but usually you should use only one. Turning on both easily makes the menu show twice on the page.
Keep the header from flickering and set the text color automatically
When you choose to replace the old menu, the theme’s menu hides before Navi+ finishes drawing the new one, so the header can flicker or jump slightly when the page loads. In the Publish window there is an optimization option labeled Replace only. It places a placeholder frame where the old menu was, to keep the page still. This only applies when you choose to replace the menu. For detailed steps, see Settings that keep your menu loading fast and flicker-free.
If your header bar is transparent at the top of the page and turns white when the shopper scrolls down, keep Auto text color on. This setting changes the menu text color to match the header background, so white text doesn’t disappear on a white background. It also only applies when you choose to replace the menu.
Fix common problems
The Publish window is on but the menu doesn’t show
Clicking Turn on alone doesn’t tell the menu where to appear on the page. Choose a placement card under Choose a menu placement, or drag the app block into the theme. Then check whether the app embed is turned on. For the full list of causes, read Menu not showing on your store.
The menu removed the whole header bar
The cause is that you picked the box wrapping the entire header instead of just the menu bar. Go back to Method 1 and choose the Replace your main menu card. If you’re typing a CSS selector yourself, pick a smaller element inside the header that wraps only the navigation links.
The theme’s old menu still doesn’t disappear
You might be choosing to insert before or after rather than to replace, or the theme may have two menu bars. Switch to Replace, or see how to handle it in Hide the theme’s built-in menu and Menu shows twice.
The header flickers when the page loads
Turn on the placeholder frame for page loading in the Publish window. For step-by-step instructions, see Settings that keep your menu loading fast and flicker-free.
Other platforms
The steps above are for Shopify — the default way.
Navi+ runs as a Wix app. The Publish window has Wix’s fixed selector table (Wix navigation selector map), so you can copy a selector into the CSS Selector field, then choose replace or insert. Wix doesn’t have the Menu in Section app block.
Other websites (including WordPress) don’t have the Menu in Section app block, so you place the menu only with a CSS selector. In the Publish window, turn on the Publish this menu switch, paste the CSS selector, then choose insert before, insert after or replace. Add the suffix (D) after the selector (for example header(D)) to apply it on computers only.