You can build your own megamenu in Theme Settings. On the customize page, click "Powerful Megamenu".
Megamenu is built based on the menu item types. Our theme provides 6 menu item types will help you build the menu easily. To add a menu, click "Add content" button, then choose an item type you want to add.
The below content will help you understand all menu item types clearly.
1. Parent Item:
This is the top level item. All other item types will be shown in a drop-down of this item.
In this item's settings: you can change item's title, the text color, and dropdown width. You can also add a menu label. View here for more details about a label.
Tips: to see the changes in the dropdown, you have to hover mouse to parent item to show the drop-down. That is really uncomfortable if you want to see your changes directly. Don't worry! Our theme provides a tool which will help you solve this problem. In parent item's settings, scroll down to the bottom, you will see a checkbox with label: "Always show drop-down".
Just tick this checkbox, the dropdown menu of current parent item will be shown even you don't hover the mouse. Don't forget to untick this checkbox before you save menu if your theme is living so that the drop-down menu is only shown when a customer hovers the mouse on the parent item.
2. Subitem - Common settings:
Let us explore the common settings of all subitems before view their details. These are the settings are available in all subitems.
a. Menu name:
This setting helps you find the item easily in Theme Settings. It is not displayed at the storefront.
b. Tittle Settings group:
The title will be displayed on the storefront. You can also align title, set color, and its position. If you tick "Extend text color from parent", the text color will get a value from its parent item.
c. Layout settings group:
- Column width : by default, the dropdown always has same 12 columns like Bootstrap's layout. You can grant the number of columns as the width of subitems.
- Inside and outside gutter:
d. Own Background Settings:
Add your background color for subitem, you can also upload your background image or provide an external image URL.
3. SubItem - Linklist:
Choose an available link list. If your site does not have any link list, you can create a new link list in Online Store > Navigation. Refer this article https://help.shopify.com/en/manual/sell-online/online-store/menus-and-links for more details about link list.
You can also set the color for link list, or extend the color from parent item.
In addition, you can add your label in a link list. View here for more details about the label. The color configuration for a label is also available in this subitem.
4. Subitem - Image:
5. Subitem - product:
View here for details of product item settings.
6. Subitem - Html:
Add your custom html. You can also change text color for the texts in your html.
7. Subitem - Row Line: