Using the Mega Menu
The new header block comes with a "Mega Menu" function that allows the loading of thumbnails and banners. This tutorial will show how to populate the mega menu with content.
Blocks Within the New Header Are Not Moveable
The New Headers of Zoey V2 do not have movable components. This is to provide our users with designer perfected headers that come with amazing new features such as:
- Sticky Header
- Mega Menu with Promo Images and Banners
- Language Flags for Language Selectors
- Multi-Column Category Navigation
Key Features of the Mega Menu:
- Dynamic Columns for Links
- Thumbnail Category Images
- Category Banner
- Sticky Nav
Adding a Header with a Mega Menu
The "Santi" theme comes pre-built with the new Santi header that has all mega menu functionality. Follow this tutorial for Converting To A New Header to add the Mega Menu to your theme.
Mega Menu Links
The Mega Menu links will dynamically populate from your Products > Categories. You can add custom links by clicking "Edit Header Essentials" then scroll down to the Header Links section and click Edit/Update Navigation.
Then you can add additional links to your header navigation.
The Mega Menu's columns are dynamic to the category structure of data in Products > Categories. A maximum of 5 columns will show before breaking down to the next row within the menu drop-down. If a category banner (see below) is added, the menu will have 3 columns before breaking down to the next row.
The Mega Menu will automatically load category thumbnails from "2nd level" categories. That is the sub-category of the top-most level of categories.
Within Products > Categories you can select your 2nd level categories:
Then upload an image and mark it as a "Thumbnail".
Recommended Image Dimensions for Thumbnails
The space allotted for the thumbnail image is set to 100% width of the image, but the height is capped. For this reason, we recommend images that are horizontal rectangles.
(Greater than 228px wide by 97px high)
The Mega Menu will load "Additional Category Information" from the Level 1 Category into the mega-menu to the right of the links.
In Products > Categories select a "Level 1" category:
Then scroll to the "Additional Category Info"
Here you can insert text, an image, link, or HTML content to load in the Mega Menu.
Updated almost 4 years ago