Navigation
There are three different ways that a navigation menu can display in the header of the Whisk Theme:
- Header — Mega menu
- Header — Dropdown menu
- Menu drawer
Structure
All menu navigation links in the Whisk theme work by a "click" on the link. Shopify navigations have the option to nest links within 3 levels. In here and throughout our documentation, we will refer to these three levels with the following terms:
- Main menu item
- Top level menu item
- Sub level menu item
Header — Mega menu
In a Mega menu, Top level items can also link out to other pages. If you don't want the Top level item to link out to another page, insert a "#" in Shopify Admin where the url would normally go. All Top level items will be styled the same.
Header — Dropdown menu, Menu drawer & Footer
Because of the structure of these menus, the "Blog" link can't link out to a page, it's click has to be used to reveal the Top level or Sub menu items nested inside of it. In these cases, we can't have the "Blog" link to be a link to anywhere else. There are two options here for how you can handle this.
In the case of the "Blog" link we are currently using as an example, there is not overall "Blog" page to link to anyway, we are just using "Blog" as a header title for the links below it. When this is the case, add a "#" where the url would normally go in the Shopify admin.
The second option would be in the case where the Main menu or Sub menu item represents a header or title where there is a page that it could go to, like for example, a collection. Here's an example of that structure:
In this case, "Olive oil" as the Main menu item is a header for the Top menu links of "Signature blends" and "Infused olive oils" below it. Both Signature blends and Infused olive oils have their own collections, but there is also a collection of just "Olive oil" that contains all of the products in the other two collections. In this case, we should add a link to the Olive oil collection to the Olive oil Main menu item like this:
When a real link exists in a Main menu or Top menu item in a dropdown menu or the menu drawer, it creates a link at the bottom of the sub menu items that reads "See all" that will link to that page.
