The Generator theme separates header building from header styling. You build your header structure in the Global Content Editor, but all visual styling happens in Global Theme Styles. To get there, click Edit Theme from any page editor.
Once inside Global Theme Styles, click More Settings, then select Website Header.
Generator supports two header types, and each is styled in a different location.
If you're using the standard header with dropdowns, all styling lives under Website Header in the theme settings covered here. If you're using the Generator Mega Menu, you'll style it separately under the Mega Menu Header settings — that's covered in the next lesson.
Inside Website Header, you have access to:
Explore each setting to dial in the look that fits your brand.
Generator adds a custom Position setting not found in standard HubSpot themes. This lets you choose between two behaviors:
If you set the header to Fixed to Top, it's removed from the page's natural stacking order, which causes content below it to slide up underneath it. To fix this, enable the Adjust Content option. This uses JavaScript to push page content down by the exact height of the header.
Alternatively, you can skip the JavaScript adjustment and manually add top padding to the first section on each page.
Generator also lets you define exactly when the header collapses into a hamburger menu. The default breakpoint is 768px, but you can change this to any pixel value.
This is especially useful if your navigation has many items — raising the breakpoint ensures that tablet users see a clean mobile menu rather than a broken or overlapping nav bar.
Global Theme Styles → More Settings → Website Header
Set your background color, menu styles, dropdown appearance, header position, and responsive breakpoint from this single panel.