We are Underground support

9. Setting up the Navigation & Mega Dropdown Menu

Last Updated: Mar 09, 2018 03:19PM EST

The Icon theme features a sticky navigation which will help your customers to find their way around your store regardless of what page they're on or where they have scrolled down to. Within this navigation, you can also add a mega dropdown menu to one or more of the links in your main menu. This mega dropdown menu can show up to four levels of menu items from one single dropdown, the mega dropdown is designed for menus with more than two levels of navigation items.

Here are step-by-step instructions for setting up a mega dropdown menu. Note: If you purchased your theme before Tuesday, January 9th, 2018 you will need to either upgrade to the newest version of Icon theme or follow the instructions here.

Step 1: Create an Outline

When planning your navigation items, it helps to create an outline showing the navigation hierarchy. For this example the navigation hierarchy we will be set up is as follows:

  • Shop (level 1 with mega dropdown)
    • Tops (level 2)
      • Bras & Bandeaus (level 3)
      • Long Sleeves (level 3)
      • Tanks (level 3)
    • Bottoms (level 2)
      • Yoga Shorts (level 3)
      • Yoga Pants (level 3)
      • Capri Pants (level 3)
      • Leggings (level 3)
    • Other (level 2)
  • Blog (level 1)
  • Contact Us (level 1 with normal dropdown)
    • Shipping Policy (level 2)
    • Return Policy (level 2)

Step 2: Setup Navigation Items

In your Shopify admin go to Online Store > Navigation click on Main Menu. First, add your Level 1 menu items, then add your Level 2 menu items positioning them inside the Level 1 items using the drag and drop. If you have Level 3 menu items, create them and position them inside the Level 2 items using drag and drop. Click save. Your nested navigation should now match your planned navigation hierarchy.

Step 3: Setup Mega Dropdown

In your Shopify admin go to Online Store > Themes click the Customize button next to your theme. In the Shopify theme editor click on the Sections tab and select Header. Scroll down to Content and select Add mega menu. For the Menu Item field type in the exact title of the menu item you want to have a mega dropdown, for my example, I will use Shop. Optionally upload a featured image for the mega dropdown and select a link for the image if it is clicked. Click save. Now if you would like you can add another mega dropdown, but for our example, we will only have one.

Your shop Header and Navigation are now complete, time to move on to a crucial step, Setting up your Homepage!


Get help

Want to customize your theme?
Have questions not covered in our docs?
  • Ask a theme support question
  • Support Hours:
    9:30 - 17:30 EST
    Monday - Friday

seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found