How to Create Page-Level Headers for your HubSpot Site Using Generator

Generator includes a special Local Header module that allows you to replace or override the global header on an individual page. This is especially useful for landing pages and microsites where you want tighter control over layout, navigation, and call-to-action focus. The steps below show exactly how to add, configure, and use it.

1. Add the Local Header Module to Your Page

Sometimes you need a unique header for a specific page—especially for campaigns, landing pages, or microsites. Generator’s Local Header module gives you page-level control without changing anything globally.

Insert the Module

1. Click the + icon in the left sidebar to open Generator’s modules.

2. Search for Header – Local.

3. Drag it onto the page, placing it directly under the global header.

When added, Generator automatically places the local header inside its own section.

Remove Extra Section Padding

1. Click the section that contains the Local Header module.

2. Go to Alignment & Spacing.

3. Set top and bottom padding to 0.

   • This gives the new header the proper “header-like” appearance.

Style the Header Elements

Click the Local Header module to customize:

• Logo

• Button style (primary/secondary/highlight)

• Colors, spacing, and alignment

This works almost identically to styling the global header—except it applies only to this page.

2. Configure Navigation Behavior in the Local Header

The Local Header allows more flexibility than the global header—especially for landing pages, where you typically remove navigation links to keep visitors focused.

Choose or Remove the Menu

1. Open the Local Header settings.

2. Go to the Menu section.

3. Pick any HubSpot menu you’ve created under Settings → Content → Navigation.

For landing pages that should have no menu, Generator provides a control HubSpot doesn’t offer:

Hide the Navigation

Toggle Show / Hide Navigation to remove the menu entirely.
This is the recommended setup for conversion-focused landing pages.

3. Hide the Global Header and Activate Only the Local Header

Every page loads the global header automatically unless you tell Generator otherwise. The Local Header module includes built-in visibility controls so you can override it instantly.

Hide the Global Header

1. Click the Local Header module.

2. Open the Visibility section.

3. Toggle Hide Global Header.

The global header will still appear momentarily in the editor, but once the page reloads or you switch to preview, it will be fully removed.

Confirm the Override

Refresh or preview the page to verify:

• The global header is hidden

• The local header is now the primary header

You can always reverse this:

1. Open the Local Header settings

2. Untoggle Hide Global Header

3. Refresh the page to bring it back

Summary

To override your global header on any page:

1. Add the Local Header module under the global header and remove section padding.

2. Customize the header—logo, menu, buttons, or hide navigation entirely for landing pages.

3. Hide the global header using the visibility toggle inside the Local Header module.

This gives you total flexibility for pages that need unique branding, custom layouts, or high-conversion structures—without touching any global settings.