Create a Desktop Mega Menu

In Navi+, click Add menu, then pick Desktop Mega Menu. This type skips the “how do you want to start?” question and opens the builder straight away — the builder already contains both ways of working: your own links on the left, ready-made designs on the right.

On the left, pick the menu list Navi+ should build from — your Shopify menus, or collections, products, blogs and pages. On the right, pick a template: it decides how one top-level item will look when it opens.

Name your first top-level item — Shoes, Men, Sale — and click Add item. Navi+ fills the panel from the links you picked and shows a Result strip: what went in, and what didn’t fit the template. Keep it, or click Change it. Repeat for each top-level item, then click Create menu.

Choose where the menu goes. Three options, and they decide what happens to the menu your theme already has:

• Replace my current menu — the Navi+ menu takes the place of your theme’s navigation, in the same spot in the header. This is the usual choice for a mega menu: one menu, no duplicates.
• Place it below my header — your theme menu stays where it is and the Navi+ menu appears as a second row underneath. Handy while you’re still comparing the two.
• Insert as a theme section — you copy the menu ID, then drop the Menu in Section app block wherever you like in your Theme Editor. Most freedom, but it means a trip into the theme editor.

Navi+ shows a picture of what each one does to your page. Pick one and click Continue.

Confirm the colours. Navi+ has measured your header’s background and text colour and shows them on a small preview bar, so you can see the menu in your own colours before it exists. Keep the Recommended pair, or choose Pick my own and set a background and a text colour yourself — if the two would be hard to read together, Navi+ says so. Click Continue and the menu is created; the editor opens on it.

Build shows the menu as a tree: each top-level item holds columns, each column holds groups and links. Drag to reorder, click any row to edit its text, link, image, description or badge — and add banners, cards or a block of your own HTML wherever you want them.

Style > Palette makes it match your store in a few clicks: your primary colour plus Generate, or one of the ready-made palettes. Then Main menu and Sub menu open everything else — fonts, text and icon colours, image ratio and corner radius, spacing, background, shadow, animation.

Open Publish. The Navigation selector map at the top already lists the real CSS selectors for your theme: which one is the header, which one is the main menu, and what each is good for. Click one to copy it.

Method 1 — CSS selector. Step 1 confirms the app embed. Step 2 turns on Publish this menu (on its own this doesn’t show anything yet). Step 3 is the placement: Insert after, Replace or Insert before, plus the selector you copied — for a mega menu, that’s usually your main menu, so the Navi+ menu takes its place.

Method 2 — App block. If your theme supports app blocks, open your theme editor and drag Menu in Section where you want the menu. No CSS selector at all. Method 1 gives you finer control; Method 2 is faster.

Step 1 — Copy embed item. One click copies a ready-made item that already points at this mega menu.

Step 2 — Pick the Mobile Menu to paste it into. Don’t have one yet? Create a Mobile menu right here, then paste the copied item into its level 1. From then on the panel says “This menu already shows on mobile” and names the drawer it lives in.

Step 3 — Trim it for mobile, if you want. Some things earn their place on a wide screen but not on a phone — a promo banner, a fourth column of links. Open that item in the mega menu, go to Visibility, and turn on Exclude when embedded: it stays on desktop and disappears from the mobile copy.