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

Fashionopolismincludes a Sticky Navigation that will show up to 3 Levels of Dropdown Navigation and optional megamenus
When planning your navigation items, it helps to create an outline showing the navigation hierarchy. For this example, the navigation hierarchy was set up as shown.

Navigation setup

In your Shopify admin go to Online Store > Navigation click on Main Menu. 
First, add your Level 1 menu items, followed by your Level 2 menu items, carefully positioning them inside the Level 1 items using the drag and drop interface. 
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.

Megamenus

A megamenu is simply a 3 level dropdown menu ( as shown above ) but styled to display a multi-column layout.

Level 1 is your top-level navigation, Each Level 2 link represents a column, and each Level 3 link represents the links within that column.

If your navigation does not have 3 levels of links then the megamenu is not going to work for your needs and should not be added.

  1. In your Shopify admin go to Online Store > Themes click the Customize theme button next to your theme to load the Shopify theme editor. 
  2. In the Shopify theme editor click on the Sections tab and select Header.
  3. In the Content, area select Add mega menu
  4. In the Menu Item field enter the title of the menu item from which you would like to see a megamenu dropdown - this must match the case used when entering this into your store admin.
    In the below example we entered  Shop. As the menu contains a link named Shop the mega dropdown will appear when this is hovered.
  5. Optionally upload a featured image that will be displayed and add a link to it. 
  6. Click save when complete