9. Fashionopolism Theme: Setting up the navigation and mega drop down menu

In this article, we will go through the process of setting up the Header Section. 

Navigation 

Choose the menu that you would like to use for your primary navigation. Choose a centered navigation layout ( defaults to left when unchecked ).

Navigation height - Navigation height - Adjust the height of the menu bar from a slim 30px to a more spacious 60px.

Links per column - This allows you to choose how many links will show per column giving you a multi column navigation. This setup can handle a total of 60 links within any 1 menu showing a maximum of 20 links per column across 4 columns. 

Mega Dropdown - the theme features a sticky navigation which will help your customers to find their way around your store regardless of what page they are on or where they have scrolled down to. Within this navigation you can also add a mega menu to one of the links in your main menu. This mega menu can show 4 menus from one single drop down, all that you need to do is enter the name of the link in your main menu that you want it to drop down from and then choose menus that are to show when this is hovered.

At the bottom of this section you will use the Content section to add menus to this mega dropdown.

Here are step-by-step instructions for setting up a mega  dropdown  menu.

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:

  • Home 
  • Shop 
    • Shop by type
      • Capris
      • Yoga
      • Tanks
      • Long sleeve
    • Shop by color
      • All black
      • White
      • Print
    • Explore
      • Favorites
      • Restocked
      • What's hot
      • Staff picks
  • Blog 
  • Contact
  • Features

Step 2: Setup navigation items

In your Shopify admin go to Online Store > Navigation click on the menu being used for the store's navigation. 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. More information on nesting navigation menu items is available on this guide.

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.Under the Content section at the bottom of the menu 1 out of a possible 4 menus have been chosen

The Shop link will now show a mega menu containing those 3 menus.