March Documentation

Header mega menu

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:

  1. 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
    Image 2020-12-02 at 8.06.23 PM.jpg?source=viewer&v=d531d892cd6022706e8f5fea47afb421
  2. Once added, here is a screenshot of all the fields and field groups:

    Image 2020-12-02 at 8.09.39 PM.jpg?source=viewer&v=24eda7cbfc17cb0ebbe18eee2e08ec94
    1. 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.
    2. 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. 
    3. Row Appearance: Customize the padding and background option of the mega menu.
    4. Typography: Customize heading and text color
    5. Column Separator: Choose to display a separator between each mega menu column.
    6. Column Repeater: Add/edit/remove columns within the mega menu.
  3. 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:

    Image 2020-12-02 at 8.16.07 PM.jpg?source=viewer&v=ee0d37f71d0634fb4c5bb7d53d5b20b8
    1. 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. 
    2. Alignment: Desktop and mobile text alignment options
    3. Content Repeater: Choose the type of content(s) to be displayed within the column. 
  4. 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.
  5. Choose the Content Variant to be displayed
    Image 2020-12-02 at 8.19.25 PM.jpg?source=viewer&v=39b4ff928e875dadbfda3420de223aca
    Supported Content variants:
    1. Content
    2. Form
    3. Inline Menu
    4. Vertical Menu
    5. Logos
    6. Posts 01
    7. Posts 02
    8. Social Links

    Add as many contents as needed, these contents will be displayed vertically inside the column.