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.
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.
The Menu section controls the appearance of your top-level navigation links. From here you can adjust:
You can also style the button that appears in the header and configure the language switcher if your site uses multi-language content.
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.
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: