Skip to content

Header and footer settings

A per page settings module with three controls: where the header sits on this page, its colour scheme, and which footer this page uses. Best for: the one page that needs a dark header over a dark hero, or a landing page that should keep the full site footer.

📷 Hero image

Target file: assets/img/header-and-footer-settings/hero.webp

The module open in the HubSpot editor sidebar, since it renders nothing visible on the page. Show both controls: a Header color scheme dropdown set to Dark, and a Footer for this page dropdown open to reveal Default plus the four named footers. Alternatively show a page with a dark hero where the header sits over it in light text. Captured at desktop width.

At a glance

Configuration Page level Header Footer

  • What it does: stores three page level values. Two decide where this page's header sits and which palette it uses, the third overrides which footer renders.
  • Best used for: the exceptions. A dark hero that needs a light header, or a single page that should not use the footer the rest of the site uses.
  • Not the right fit if: you want to change the header or footer everywhere (do that in Theme Settings).
  • 🔗 Live demo: (add demo link)

This is a configuration module

It renders nothing visible. It is mounted once for you in the page layout, so you do not add it, you just open it and set the two values.

Renamed from Page Settings

This module was called Page Settings until August 2026. The folder, label and instance name all changed together, so any page configured before the rename resets to Auto and Default.

How to use it

  1. Open any page in the HubSpot editor.
  2. Find Header and footer settings in the module list, near the top of the page contents.
  3. Set Header position if this page needs the header to float over the hero.
  4. Set Header color scheme if this page needs a different header palette.
  5. Set Footer for this page if this page needs a different footer.
  6. Leave any of them on its default and the page simply follows the theme.

Header position

Decides whether the header sits in the page flow or floats over the top of the page.

Value Effect
Theme default follows Theme Settings › Website header › Header position
Normal the header holds its own space and content starts below it
Overlap the header floats over the first section with a transparent background

Overlap is what puts a hero image behind the navigation. The header starts transparent and turns solid once you scroll, using the Style (on scroll) colour, as long as Sticky behavior is Sticky or Hide on scroll down.

Overlap disables Header background

A floating header has no background of its own to set, so the Header background control does not apply while Overlap is active. Use Background on scroll to control how it looks once the page moves.

You do not need to add space for it

The first section on the page clears the header automatically, on top of whatever Top spacing it already has, so a heading never ends up hidden behind the navigation. This works with any module placed first, and the amount is measured from the real header, so it keeps up if you change the logo or the navigation button size.

Pair Overlap with Header color scheme below. A hero photo usually needs the Dark scheme so the menu stays readable over it.

Header color scheme

Value Effect
Auto the header uses its theme default
Light forces the light palette on this page
Dark forces the dark palette, for light text over a dark hero

The class is stamped on the root <html> element by an inline script that runs before the header paints, so there is no flash of the wrong palette on load.

Footer for this page

Value Effect
Default (set in Theme Settings) the page uses the footer for its page type
Footer - Classic forces the classic site footer
Footer - Newsletter led forces the site footer with the signup form
LP Footer - Minimal forces the two row landing page footer
LP Footer - Centered Nav forces the centred landing page footer

Default means: a page built from a landing page template gets the landing page footer, everything else gets the site page footer, and which one of each pair is set in Theme Settings › Website footer.

Naming a footer overrides both halves of that. Because the choice also decides which footer family runs, a landing page can carry a site footer and a site page can carry a landing footer.

Leave it on Default unless you mean it

A page left on Default keeps following the theme. Pin a real footer and that page stops responding to theme changes for good, which is usually only what you want for a genuine exception.

Common setups

Goal Setting
Hero image running behind the navigation Header position = Overlap
Light text header over a dark hero Header color scheme = Dark
Follow the theme header everywhere Header color scheme = Auto
Let this page follow its page type Footer for this page = Default
Put the site footer on a landing page Footer for this page = Footer - Classic or Footer - Newsletter led
Put a landing footer on a site page Footer for this page = LP Footer - Minimal or LP Footer - Centered Nav
Change the footer for the whole site Theme Settings › Website footer, not here

Field reference

Three fields, all on the Content tab.

Page options
Field Type What it does Default
Header position choice Theme default, Normal or Overlap for this page's header. Theme default
Header color scheme choice Auto, Light or Dark for this page's header. Auto
Footer for this page choice Default, or one of the four footers by name. Default (set in Theme Settings)

Tips & gotchas

Pair a dark header with a light logo

On a dark hero, upload a Logo in the header settings so your brand mark stays visible when the header switches palette.

The footer choice has no visible field on the footer itself

The footer modules do not know which page they are on. This module stores the choice, and the page layout reads it to decide which footer partial and which module inside it render.

One module per page, mounted for you

It is placed in the page layout, so there is nothing to add or drag. If you cannot find it, look at the very top of the page contents list rather than in the Add module panel.