Course

Generator Onboarding

14 of 16 lessons completed 88%

Introduction 1 lesson
1. Welcome 5 min
Setup 2 lessons
1. Installing Generator 5 min
2. Create a Child Theme 2 min
HubSpot Settings 3 lessons
Global Theme Styles 9 lessons
Headers & Footer 4 lessons
1. Standard Header 5 min
2. Mega Menu Header 5 min
3. Landing Page Header 5 min
4. Page Scroll Header 5 min
Building Website & Landing Pages 4 lessons
1. Drag and Drop 5 min
2. Sections 5 min
3. Columns 5 min
4. Modules 5 min
Building your Blog 3 lessons
1. Blog Settings 5 min
2. Blog Listing Template 5 min
3. Blog Post Template 5 min
Conclusion 1 lesson
1. Wrapping Up 5 min

How to Style a Mega Menu Header

Enable the Mega Menu Header

Before styling, you need to activate the Mega Menu. In HubSpot, navigate to your Global Theme Styles by clicking Edit Theme. Once inside, go to More Settings and select Mega Menu Header. At the top of this section, toggle on the Mega Menu Header opt-in. Without this enabled, the Mega Menu will not be available on your site.

Style the Header Background and Spacing

With the Mega Menu enabled, you can begin styling from the top of the settings panel.

Background sets the color behind the full header bar. Click the color swatch and choose your desired color — for example, selecting lavender will apply that color across the entire header background.

Spacing controls the padding around the header itself, giving you room to breathe between the nav and the edge of the viewport.

Position lets you set the header to sticky, keeping it fixed to the top of the page as users scroll.

Configure Menu Item Styles

The Menu section controls the appearance of your top-level navigation links. From here you can adjust:

Text colors for menu items
Font styles including typeface and weight
Spacing around each item
Alignment of the nav links
Mobile layout for how items stack on smaller screens

You can also style the button that appears in the header and configure the language switcher if your site uses multi-language content.

Set the Responsive Breakpoint

Under More Settings, you'll find the option to define the pixel width at which the full navigation collapses into a mobile menu. This is especially useful if you have a large number of top-level navigation items and need the breakpoint to kick in earlier or later than the default.

Style the Mega Menu Dropdown (Submenu)

The Submenu section controls the appearance of the actual Mega Menu dropdown — the panel that appears when a user hovers over or clicks a top-level menu item.

Key options here include:

Background color of the dropdown panel (e.g., grey)
Corner radius to apply rounded or sharp corners
Padding around the dropdown content
Column spacing between Mega Menu columns
Drop shadow to add depth to the dropdown

This lesson covered how to style the Mega Menu header using the Global Theme Styles panel in HubSpot. Key actions included enabling the Mega Menu opt-in toggle and walking through every styling option — from the header background and menu item typography to the dropdown background, corner radius, and column spacing. The next lesson will cover how to actually build the Mega Menu structure inside the Global Content Editor.