Hatch theme has a mega menu built-in, and you can build a custom mega menu for every menu item in your site's navigation.
First, click here to find out how to open the Header global module.
Once opened, here are the next steps:
- The whole mega menu feature is built as a single repeater.
If you're building a new mega menu for the first menu item in your site navigation, then you'll need to create a new repeater item by clicking the +Add link - Once added, here is a screenshot of all the fields and field groups:
- Internal name: Assign a unique name for each mega menu to differentiate in the page editor. The value set isn't printed on the actual live site.
- Enable This Mega Menu boolean: Enable/disable the mega menu. It's useful when you're building a new one but you don't need it live immediately.
- Row Appearance: Customize the padding and background option of the mega menu.
- Typography: Customize heading and text color
- Column Separator: Choose to display a separator between each mega menu column.
- Column Repeater: Add/edit/remove columns within the mega menu.
- In the Column Repeater field, we have the option to add as many columns as needed.
Think of a mega menu as a section with 12 possible columns, and you can add custom content in each column.
In each column, you'll find the following fields/groups:
- Column width: Decide how wide this particular column will be printed.
A mega menu supports up to 12 columns, if you plan to display 2 equal-width columns, you can specify 6 in this field. - Alignment: Desktop and mobile text alignment options
- Content Repeater: Choose the type of content(s) to be displayed within the column.
- Column width: Decide how wide this particular column will be printed.
- Within each column, you can decide the types of contents to be displayed.
First, add a new Content repeater item by clicking the +Add button. - Choose the Content Variant to be displayed
Supported Content variants:- Content
- Form
- Inline Menu
- Vertical Menu
- Logos
- Posts 01
- Posts 02
- Social Links
Add as many contents as needed, these contents will be displayed vertically inside the column.