How to Create a Mega Menu for your HubSpot Site using Generator

Generator includes a built-in mega menu system you can enable, build, and style without any code.
Follow these three steps to switch from the standard menu to a fully custom mega menu.

1. Enable the Mega Menu in Global Theme Settings

Open the Theme Settings

1. In the page editor, click Edit → Theme.

2. Select More Settings.

Toggle the Mega Menu Option

1. Open the Mega Menu section.

2. Turn Use Mega Menu Header on.

   • Generator uses the standard header by default, so this toggle activates the mega menu layout.

Publish the Theme

Click Publish Theme in the top-right corner to apply the change.
After publishing, your header will temporarily show only a logo and a button—this is expected.

2. Build the Mega Menu in the Global Content Editor

Open the Global Content Editor

1. Click the header in the page editor.

2. Select Edit Global Content (this is different from theme settings).

   • This is where you edit your header and footer structure.

Create a New Menu Item

1. In the header module, go to Menu Items.

2. Add a new menu item and give it a label.

3. Choose Clickable Link if it should behave like a normal link or leave it unlinked to add a mega menu dropdown.

Add Columns to the Mega Menu

A mega menu is made of columns. Each column can contain images, text, or HubSpot menus.

Add a Rich Text Column

1. Click Add Column.

2. Set a width (e.g., 300px) if you want consistent layout control.

3. Set Content Type → Rich Text.

4. Add any content you want:

   • Images

   • Text

   • Icons

   • Videos

   • CTAs

   • Embedded content

5. Click Apply Changes to preview the column.

Add a Menu Column

1. Click Add Column again.

2. Set a width (e.g., 200px).

3. Set Content Type → Menu.

4. (Optional) Add a header label for the column.

5. Choose an existing HubSpot menu from the dropdown.

   • HubSpot menus are created under Settings → Content → Navigation.

Clone Columns for Speed

If you need multiple columns with similar layouts:

• Clone an existing column

• Update the header and menu selection

• Apply your changes

Publish the Mega Menu Structure

Once your dropdown structure is complete:

1. Click Publish in the Global Content Editor.

2. Return to your page to preview the working mega menu.

3. Style the Mega Menu in Global Theme Settings

Open the Mega Menu Styling Panel

Go to Edit → Theme → More Settings → Mega Menu Header.

Adjust Menu Appearance

You can style both the top-level menu and the dropdown.

Top-Level Menu Styles

• Background color

• Link styling

• Padding

• Corner radius

• Drop shadow

Dropdown (Mega Menu) Styles

• Background color

• Inner padding

• Column spacing

• Border radius

• Shadows

• Hover interactions
  Try experimenting with these settings to achieve your desired look.

Set the Responsive Breakpoint

In Settings → Header, adjust the responsive breakpoint:

• Determines when the header switches to mobile/hamburger mode

• Useful if your mega menu has many columns and risks overlapping with the logo on tablet screens

Summary

To create a mega menu in Generator:

1. Enable the mega menu toggle in the global theme settings.

2. Build your menu structure in the global content editor using columns (rich text or HubSpot menus).

3. Style the mega menu back in the theme settings to match your branding.

Once these steps are complete, your website will display a fully customizable, professional mega menu—no code required.