Flex includes a highly customizable Mega Menu to enhance your shop's Navigation.
Add up to 10 Mega Menus to connect with the header. Each of these mega menus can have up to 6 columns customized with content blocks.
Enable Mega Menus in the Header section, then customize the Section Settings and Content Block Settings to build your Mega Menu.
Enable Mega Menus in the Theme Settings
Open the Header section in your theme editor (Customize).
Click to enable one or multiple mega menus with Enable mega menu 1-10.
Return to the main sidebar to open the newly activated Mega Menu sections.
Section Settings
Click Mega Menu 1 to customize the section settings.
These settings are divided into three areas: Mega menu, Bottom bar, and Advanced.
Mega menu
Enter a Link title that matches the link in the main menu that you want the feature to connect to.
For example, for a mega menu to appear under the 'Catalog' menu item, the Link title will need to match 'Catalog'.
Add columns to your mega menu by clicking Add column.
Enable Show borders to have the columns in the mega menu feature a border as a divider. Customize the border color in the Colors portion of the Theme settings.
Select custom colors for the mega menu Background and Text within the swatch selectors.
These color settings apply to all mega menu content blocks except for Featured Promotions since it has its own color settings within that content block.
Bottom bar
The Mega Menu includes an option to enable the Bottom Bar which is a great place to add promotional text, discount codes, or announcements for your customers to see.
Click to activate the Show bottom bar setting.
Add an Icon to your bottom bar using the provided field. This displays on the left side of the text.
Identify the icon by adding the name included in our Flex Icon List to the Icon field.
With the Text field, add any promotional text or important announcements for your customers to see.
Include a Link for the bottom bar as well which can be either an internal page or an external URL.
The Base size setting lets you choose the font size for your text in the bottom bar. The options include Small, Regular, and Large.
Select the colors for the bottom bar Background and Text within these settings.
Advanced
The Mega Menu includes an option to add in your own CSS class and Custom CSS.
More information about using the Advanced CSS feature.
Use the CSS class field to create a new class to apply to the section, or you can add a class that already exists to apply those styles as well.
Add the CSS-formatted code to the Custom CSS field.
Content Block Settings
The content block settings are where you configure the columns of your 'Mega Menu' by choosing which content blocks to add. The available content block options are Custom HTML, Menu, Image, Mixed, Featured product, Featured promotion, and Empty column.
Customize Page Blocks
Custom HTML
Add HTML-formatted code to your Mega Menu with the Custom HTML block.
Menu
Add a Menu content block which is a great and organized way to display links to your collections in the Mega Menu. Add a Menu heading link, as well, for the heading to lead to its own page.
This menu doesn't display drop-down items
Image
Add an Image content block to display static media in your menu. Use the Image link field to connect to another page or URL. Add a label using the Text field (displays below the image).
We recommend using a 600 x 600px image size
Mixed
The Mixed content block combines a number of sections into one column. Enable a Top image and/or Bottom image, add text fields, connect images with links, and add Menus.
Featured product
If you have a new or special product that you'd like to highlight in the Mega Menu, you can make use of the Featured Product content block. With the Featured Product content block, the product image, product title, and price will display. There is also a Text field to add more text.
Featured promotion
The Featured Promotion content block is a great way to catch your customer's attention and direct it towards specific content in your shop that you’d like them to see or explore further. Add an Image, Text, choose Background and text colors, add a Button link and label, and choose between your Primary and Secondary button styles.
Empty column
The final content block option is the Empty Column which helps to fine-tune the layout for the blocks.