A horizontal category bar right under the phone header that shoppers can swipe sideways. When a shopper taps an item, its drop-down panel opens right there, with no page change. The panel can hold images, products and banners.
Before you start: Navi+ is installed and you have turned on Store Connector in your theme.
1Choose a menu type
In Navi+ click Add menu, then choose the Mobile Mega Menu card.
2Two ways to start
Build step by step
Click Create from your website > Build it step by step. Add 3 to 8 items for the bar: type a name, then choose Link to go straight to a page, or Submenu to open a drop-down panel. For a Submenu item, the next screen asks you to pick a link inside it and a display style (Icon + Title + Desc, Title + Desc, Title only or Grid), then click Generate menu.
From a template or from scratch
Click Create from a template > Browse templates. Choose a template and Use this template (with Quick test to try it first), or choose the Blank card for an empty menu and then Add item yourself.
3Fine-tune by hand
Whether you build step by step or from a template, you still fine-tune in Build Menu: level 1 is the items on the bar, and level 2 and 3 are the content inside that item's panel. Drag to reorder, and click an item to rename it or change its link or image. In Design, change the colors: Main menu for the bar, Sub menu for the panels.
Limit: up to 3 levels. Level 1 shows text only, with no icons. The phone screen is small, so keep panels compact so shoppers can tap accurately.
4Typical item patterns
Select a level 1 item, then click + ITEM to open the Add item popup and add content to its panel. These are the most used patterns.
Lists and grids: the body of a panel
In Links & icons: List (a neat line of links), List with icons (an icon before each line), Icon grid and Image grid (a grid of icons or images with names). Shoppers recognize product groups faster with images or icons than with text.
Banners and Cards
In Cards & banners: large images with text and a button, to promote a new campaign or collection right inside the panel.
Automatic product blocks
In Live sections: New arrivals, Best sellers, Shop by category or Custom rule. Products are pulled from a collection and refresh automatically, up to 20 per block. Shopify only.
Campaign spot
A slot reserved for a campaign: assign it and it shows a Tag (HOT, SALE), a countdown or a scheduled banner, and removes itself when it expires.
HTML block
In Media & code: paste HTML code (an embedded video, sign-up form, widget) into the panel. The code only runs when a shopper opens the panel, so it doesn't slow the page. Paste only code you trust.
Shopify menu (embedding a whole Shopify menu), Sticky line and Menu reference are only in a Mobile Menu, not in a Mobile Mega: Mobile Menu.
5Publish: place the bar below the header
Open Publish, choose where to place it, then click Turn on. The bar sits inside the page, so it needs a placement spot. Navi+ has already found the spot right under the header on your theme. By default the bar only shows on phones.
Add below your header
A full-width bar inserted right under the header on phones. The theme's navigation menu stays intact, so shoppers get an extra row of categories to tap.
Need another spot, for example before or after any element? Choose Somewhere else and use a CSS selector.
Use with a Mobile Menu and a Tab Bar
The bar only fits a few main categories. Many stores let the Mobile Mega show the main categories, the Mobile Menu hold everything else, and the Tab Bar handle quick navigation at the bottom of the screen.
See how to combine themOther platforms
The steps above are for Shopify — the default way.
On Wix, Add menu opens the template picker directly instead of the builder above; choose Mobile Mega Menu and a template, then edit it in the menu editor. Wix has no “Menu in Section” app block, so it can only be placed with a CSS selector. The Live sections block is only on Shopify.
On WordPress and other websites, Add menu opens the template picker directly instead of the builder above; choose Mobile Mega Menu and a template, then edit it in the menu editor. There is no “Menu in Section” app block, so it can only be placed with a CSS selector. The Live sections and Shopify menu blocks are only on Shopify.