Understanding Where Header Styles Live
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.
Standard Header vs. Mega Menu 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.
Styling the Standard Header
Inside Website Header, you have access to:
- Background Color — sets the header's background
- Spacing — controls padding around the header
- Menu Styles — includes text color, hover styles, spacing, and dropdown-specific settings like background color and box shadows
Explore each setting to dial in the look that fits your brand.
Setting Header Position (Sticky vs. Normal)
Generator adds a custom Position setting not found in standard HubSpot themes. This lets you choose between two behaviors:
- Fixed to Top — makes the header sticky so it stays visible as users scroll
- Normal — the header scrolls with the page
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.
Setting the Mobile Breakpoint
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.
Styling the Header
Global Theme Styles → More Settings → Website Header
Set your background color, menu styles, dropdown appearance, header position, and responsive breakpoint from this single panel.