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

Enable the Mega Menu in Global Theme Settings

By default, Generator uses the standard menu. To switch to the mega menu, go to Edit Theme, then click More Settings. Navigate to the Mega Menu section and toggle it on. Click Publish Theme in the top right corner to save the change.

You'll return to this section later to style the mega menu. For now, move on to building it structurally first.

Open the Global Content Editor

After publishing, you'll notice the header shows a blank menu — just a logo and a button, no menu items. Click the header, then open the Global Content Editor. Note the distinction: Global Theme Settings controls styling across the theme, while the Global Content Editor is where you edit the header and footer content.

Add a Menu Item

Inside the Global Content Editor, click on the header and navigate to the Menu section. Click Add Menu Item, give it a name, and decide whether it should be a clickable link or a mega menu dropdown. If you only need a simple link, select Clickable and enter the URL. To build a dropdown, proceed to adding columns.

Build the Mega Menu Columns

A mega menu dropdown is made up of columns. Each column can contain either Rich Text (images, text, CTAs, icons, video, etc.) or a Menu (a list of links pulled from HubSpot navigation settings).

To add a column:

1. Click Add Column inside the menu item.
2. Set a pixel width (e.g., 300px or 200px) to control layout.
3. Choose the content type — Rich Text for full design control, or Menu to pull in a HubSpot navigation menu.
4. If using Menu type, optionally add a column header, then select from the menus created in HubSpot settings.

To access your HubSpot menus, click the gear icon in HubSpot, go to Content, then Navigation. Any menus created there will appear in the column dropdown.

To add more columns, repeat the process or clone an existing column and swap out the header and menu selection. Click Apply Changes to preview, and Publish when the structure is complete.

Style the Mega Menu

Once the structure is built and published, return to Edit Theme → More Settings → Mega Menu Header. Here you can adjust:

• Background color of the menu bar
• Background color of the dropdown (sub menu)
• Corner radius, padding, and drop shadow
• Responsive breakpoint — the pixel width at which the menu collapses into a hamburger/mobile menu. This is important for tablets and narrower screens where long menus can break or stack unexpectedly.