Your first menu in 5 minutes

Build a Desktop Mega Menu from the navigation you already have, place it on your theme, and see it live.

You will learn

How to create your first menu in Navi+ using your existing Shopify navigation as the starting point, and how to put it on your store. We’ll build a Desktop Mega Menu — the same steps work for every other menu type.

Before you begin

  • Navi+ is installed and the app embed is on (Turn on the Navi+ app embed).
  • Your Shopify navigation already has a few links — Navi+ builds from it, so you don’t start with an empty page.
Note

Already have menus in Shopify? Keep them. Navi+ reads them as a starting point and never changes your Shopify navigation.

Steps

  1. In Navi+, click Add menu.
  2. Pick Desktop Mega Menu.
  3. Pick the menu list to build from (left), then a template (right).
  4. Type a name for your first top-level item — for example Shoes — and click Add item.
  5. Check the Result strip: it says what went in and what was left out. Keep it, or click Change it.
  6. Click Looks good — next item and repeat for the next item, or click Create menu when you have enough.
  7. Choose where the menu goes — Replace my current menu puts it in place of your theme’s navigation — then click Continue.
  8. Confirm the colors Navi+ measured from your theme, then click Continue. Your menu is created.
Navi+ menu list with the Add menu button highlighted
Everything starts from Add menu.
Add menu screen showing the menu types, with Desktop Mega Menu highlighted
Six menu types. This guide uses Desktop Mega Menu.
Navi+ wizard with Pick a menu list on the left and Pick a template on the right
Left: the links Navi+ builds from. Right: how a top-level item will look.
Wizard after adding an item, showing the Result strip and the built menu preview
One top-level item at a time. The Result strip tells you what was used and what was left out.
Where should this menu go screen with three placement options
Replace my current menu is the usual choice for a Desktop Mega Menu.

Check that it worked

Open your storefront on the theme you embedded Navi+ on — from your Shopify admin, Online Store > Themes > ••• > Preview. Hover your header: the mega menu opens.

Don’t see it? Menu not showing on your store? walks through the five checks in order.

Troubleshoot

The Result strip says items were left out

That’s normal — Navi+ only uses links that fit the template you picked. Pick a bigger template, or add the missing links later in the editor.

My old theme menu still shows next to the new one

The placement was “Insert as a theme section” or “Place it below my header”, which adds the menu without removing the old one. See Hide your theme’s own menu.

I want a mobile version too

A Desktop Mega Menu doesn’t fit a phone screen. Build a Mobile Menu as well — it can start from the same navigation.

Next: Which menu fits your store? — the other five menu types.

Did this page answer your question?

Need a hand? Chat with us in the app or write to [email protected] — send your store URL and the menu name and we'll look at it with you.