Skip to content
Get Generator
Search icon
Get Generator

How to Make Your Header Sticky in the Generator Theme

Generator includes several header types—Standard Header, Dropdown Header, Mega Menu Header, and a Local Header for template-level overrides. Any of these can be configured to stay fixed at the top of the page as users scroll. This guide shows you how to enable a sticky (fixed) header and how to properly manage spacing beneath it.

1. Open Generator’s Global Theme Settings

All header behavior is controlled inside Generator’s global theme settings. This is where you customize your site-wide styles, including typography, spacing, colors, buttons, and header configurations.

Steps:

  1. Open any page in the HubSpot editor.

  2. Click Edit theme in the left panel.

  3. HubSpot will open Generator’s global settings panel.

2. Select the Header You’re Using

Generator supports multiple header variations, including the Mega Menu header shown in this example. You’ll need to open the settings for your active header type.

Steps:

  1. In the global theme settings, locate the Header section.

  2. Choose the header type you’re using:

    • Standard Header

    • Mega Menu Header

    • Local Header (template-specific override for landing pages)

3. Change the Header Position to Fixed

By default, headers scroll with the page. Switching the position to fixed makes the header stick to the top of the screen while visitors scroll.

Steps:

  1. Open the settings for your chosen header (e.g., Mega Menu Header).

  2. Scroll down to Position.

  3. Change the setting from Scroll with page to Fix to top.

Once enabled, the header becomes fixed and remains visible as users navigate down the page.

4. Adjust Spacing for a Fixed Header

A fixed header is removed from the normal page flow, which means it sits on top of your first section. Without spacing, the header can appear too close to the content beneath it. Generator gives you two ways to handle this.

Option A: Use the “Adjust Content” Setting

This automatically adds spacing below the header so it no longer overlaps or sits too close to the top of your first section.

Option B: Add Padding to Your First Section

If you prefer manual control:

  1. Leave Adjust Content turned off.

  2. Edit your first section and add padding-top until the spacing feels right.

Both options create clean, intentional spacing beneath a fixed header.

5. Publish Your Theme Changes

Global changes do not go live until you publish them. This ensures your sticky header applies across your entire site.

Steps:

  1. Click Publish theme in the upper-right corner of the theme settings panel.

  2. Refresh your page to verify the header now remains fixed at the top.

If you'd like, I can create a matching short video description, SEO title/meta description, or a Notion-formatted version for your documentation system.