9. Icon Theme: Setting up the Navigation & Mega Dropdown Menu

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.

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!