Mobile Mega Menu and Icon Menu sit within the page content rather than floating above the screen like a Tab Bar. So clicking Turn on alone won’t show the menu. You need to tell Navi+ where on the page to place it.
Placement works the same way as for the Desktop Mega Menu. To read more about replacing, inserting before or after, and CSS selectors, read that article.
Before you start
- You’ve turned on the Navi+ app embed on the theme that’s running.
- You’ve finished creating a Mobile Mega Menu or an Icon Menu.
- Open the menu in Navi+, click Publish, then click Turn on at the top of the window to change Status: OFF to Status: ON. This button saves immediately, so you don’t need to click Save.
Method 1: Drag the app block into the theme
No CSS selector needed. You drag the menu into the exact spot you want in the theme editor and see the result as you drag.
-
In the Publish window, open Method 2: Insert as an App block in your theme editor and click Menu ID to copy it.
-
In the Shopify admin, go to Online Store > Themes > Customize. Open the page where you want the menu, such as the home page, click Add section or Add block, then choose Menu in Section under Apps.
Home page Header Image bannerMenu in SectionNavi+ Menus3Menu in Section Featured collection Add block2AddSTOREHomeShopCollectionsAboutContact -
Paste the Menu ID into the block’s setting field, drag the block to the spot you want, then click Save at the top.
9:41•••yourshop.comSTOREIcon Menu sits between the banner and the products
App blocks can only be dropped where the theme allows adding blocks. If the spot you want doesn’t allow it, use Method 2.
Method 2: Place it with a CSS selector
This method lets you place the menu at any part of the page: pick an existing element, then insert the menu before it, after it, or replace it.
-
In the Publish window, look at Choose a menu placement. To place the menu just below the header, click the Add below your header card.
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 Mobile Mega Menu shows up on your store.Replace your main menuYour mobile navigation is swapped for this Mobile Mega Menu. Logo, search and cart stay.Add below your headerA full-width bar inserted right under the header on mobile. Your navigation stays.1Somewhere elseBefore, after or in place of any element you choose (CSS Selector).Placement found by Navi+.site-headerSTEP 3Optimize speed & experience SetupSTEP 4Test this menu Open TestMethod 2: Insert as an App block in your theme editor -
If you want another spot, click the Somewhere else card, choose the replace option, insert before or insert after, then paste the address of the page element into the CSS Selector field.
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 Icon Menu shows up on your store.Insert afterReplaceInsert beforeReplace your main menuYour desktop navigation is swapped for this Icon Menu. Logo, search and cart stay.Add below your headerIcon tiles right under the header, above your page content. Your navigation stays.Somewhere elseBefore, after or in place of any element you choose (CSS Selector).CSS Selector (How?).hero-banner2STEP 3Optimize speed & experience SetupSTEP 4Test this menu Open TestMethod 2: Insert as an App block in your theme editor -
Click Save, then open your store on a phone to check.
Not sure where to get the address for the CSS Selector field? See Navi+ Live: place the menu in the right spot. If several parts of the page match the same selector, Navi+ places the menu on the first one.
Special notes for Mobile Mega Menu
- Shows on phones only: when you choose Add below your header, Navi+ automatically adds the
(M)suffix to the selector, so the menu bar doesn’t show below the header on computers. For the computer version, use the Desktop Mega Menu. - Keep the menu at the top when scrolling: if the theme’s header doesn’t stick to the top when the shopper scrolls, turn on Keep the menu at the top of the page when scrolling up. This switch is in the app block section of the Publish window.
Use several Icon Menus for different pages
Use one Icon Menu per page. If you want the home page to show one icon grid and the collection page another, create a separate Icon Menu for each and set a display rule on each. Don’t try to fit one grid onto every page. See Choose which pages, devices and shoppers see the menu.
You can also put two Icon Menus next to each other: in the Publish window, choose Below another Icon Menu, then pick the name of the Icon Menu you turned on earlier. This doesn’t need a CSS selector.
Fix problems
The menu doesn’t show
Clicking Turn on alone doesn’t give the menu a spot on the page. Do Method 1 or Method 2, check that the app embed is turned on, then read Menu not showing on your store.
The menu shows in the wrong place
Try a different card under Choose a menu placement, or switch to the app block and drag it to the exact spot you want. See also Menu in the wrong place or breaking the header.
The menu shows on a page you didn’t want
Limit the pages it shows on by page group or by keywords in the URL. See Choose which pages, devices and shoppers see the menu.
The menu shows twice
This usually happens when you turn on both the app block and a CSS selector. Turn off one of the two methods. See also Menu shows twice.
Other platforms
The steps above are for Shopify — the default way.
Navi+ runs as a Wix app and has no Menu in Section app block. 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, insert before or insert after.
Other websites (including WordPress) don’t have the Menu in Section app block, so you place the menu only with a CSS selector. Turn on Publish menu by Insert/Replace method, paste the CSS selector, then choose insert before, insert after or replace. Add (M) for phones or (D) for computers. On WordPress, you can also paste the shortcode [naviwp embed_id="..."] into a page, widget or page builder.