Edit global content
- Open any page in the editorClick the header or footer in the preview and choose Edit global content. You can also open it from Content › Design Manager under the theme's
global folder. - Make your changesThe header and footer settings open on the left with the same Content and Styles tabs as any module.
- Publish to all pagesClick Publish to all pages. HubSpot lists the pages that will change before you confirm.
Header
Four designs
- Design 1: Classic, logo, menu and buttons on one row.
- Design 2: Stacked, the menu on its own row under the logo.
- Design 3: Pill, a compact rounded bar.
- Design 4: Search bar, logo, an open search box and buttons, with the menu below. This design can only be set for the whole site.
Choose the design, and whether the header is Static, Sticky or Floating, in the header's Styles tab. Transparent background lets the header sit over the first section, which suits pages that open with a large image or dark hero.
Menu: HubSpot menu or custom menu
- HubSpot navigation menu uses a menu from Settings › Content › Navigation. Items with sub-items open as dropdowns. Best when several people manage the menu.
- Custom menu is built inside the header and supports three item types: a plain Link, a Dropdown list and a Mega menu with columns, icons and a featured card.
On phones and tablets, dropdowns and mega menus show as a simple list in the slide-out menu.
Logos
Upload one logo for light backgrounds and, optionally, one for dark backgrounds. When the header switches to dark mode (dark site, dark page option or transparent over a dark hero) the dark logo is shown. Without a logo image the Logo text is shown.
Announcement bar, search and language switcher
The announcement bar sits above the header with a message and a link; visitors can close it if you allow it, and it returns when you change the message. Search sends visitors to HubSpot's search results page. The language switcher only appears on pages that have translations.
One page without the header
For a landing page, hide the header (and the announcement bar) on that page only with Page options. The global header stays as it is everywhere else.
All header settings
| Setting | Type | What it does |
|---|
Announcement barGroup · 5 settings| Show announcement bar | On/off | Default: On | | Message | Text | The announcement text, kept to one line.Default: SaaSFlow 3.0 is here: AI-powered insights for every team. | | Link text | Text | Text of the link after the message. Leave empty for no link.Default: See what's new | | Link URL | Link | Where this link goes. | | Visitors can close it | On/off | Adds a close button. The bar stays hidden for that visitor until the message changes.Default: On |
|
| Logo (for light backgrounds) | Image | Shown when the header uses light mode. |
| Logo (for dark backgrounds) | Image | Shown when the header uses dark mode. Leave empty to use the light-background logo in both modes. |
| Logo text | Text | Shown next to the logo mark when no logo image is uploaded.Default: SaaSFlow |
| Menu | Choice | Use a menu from Settings > Content > Navigation, or build one here with dropdowns and mega menus.Options: HubSpot navigation menu (Settings > Content > Navigation)Custom menu (below), with dropdowns and mega menusDefault: Custom menu (below), with dropdowns and mega menus |
| Navigation menu | Menu | Used when Menu is set to HubSpot navigation menu. Items with sub-items open as dropdowns. |
Menu itemsRepeater · 5 settingsUsed when Menu is set to Custom menu. | Label | Text | Text shown in the menu. | | Type | Choice | A plain link, a short dropdown list, or a large mega menu.Options: LinkDropdown listMega menuDefault: Link | | Link | Link | Where the item goes. For a Dropdown list or Mega menu this is optional: when set, the label itself is a link and the arrow next to it opens the menu. | Dropdown linksRepeater · 7 settingsUsed when Type is Dropdown list. | Icon source | Choice | Optional icon beside the link: pick from the icon library, upload an image, or paste SVG code. Leave the icon empty for a text-only link.Options: Icon libraryUpload an imageCustom SVG codeDefault: Icon library | | Icon | Icon | Search the Font Awesome library and pick an icon. It takes the item's icon color. | | Icon image | Image | A square SVG or PNG, at least 48 x 48px. Uploaded images keep their own colors. | | SVG code or emoji | Text | Paste an element. Use stroke="currentColor" or fill="currentColor" so it takes the icon color. | | Label | Text | Text shown in the menu. | | Description | Text | Supporting text. Keep it to one or two sentences for best results. | | URL | Link | Where this item links to. |
| Mega menu contentGroup · 3 settingsUsed when Type is Mega menu. | Columns per row | Number | How many columns sit side by side in this dropdown. More columns than this wrap onto a new row.Default: 4 | ColumnsRepeater · 2 settings| Column title | Text | Shown as the item's heading. | LinksRepeater · 7 settings| Icon source | Choice | Pick an icon from the library, upload an SVG or PNG, or paste SVG code. If the chosen one is empty, any of the others that is filled in is used.Options: Icon libraryUpload an imageCustom SVG codeDefault: Icon library | | Icon | Icon | Search the Font Awesome library and pick an icon. It takes the item's icon color. | | Icon image | Image | A square SVG or PNG, at least 48 x 48px. Uploaded images keep their own colors. | | SVG code or emoji | Text | Paste an element. Use stroke="currentColor" or fill="currentColor" so it takes the icon color. | | Label | Text | Text shown in the menu. | | Description | Text | Supporting text. Keep it to one or two sentences for best results. | | URL | Link | Where this item links to. |
|
| Featured cardGroup · 7 settings| Show featured card | On/off | Default: On | | Eyebrow | Text | Short label shown above the heading, such as a category or theme.Default: FEATURED | | Title | Text | Shown as the item's heading. | | Description | Text | Supporting text. Keep it to one or two sentences for best results. | | CTA text | Text | Text on the button. Leave empty to hide the button. | | CTA URL | Link | Where the button goes. | | Bottom image | Image | Recommended: a PNG, JPG or WebP under 1MB. Add alt text that describes the image. |
|
|
|
Right actionsGroup · 14 settings| Show search | On/off | Default: On | | Search results page | Text | The page that shows search results. HubSpot's default is /hs-search-results.Default: /hs-search-results | | Search placeholder | Text | Hint text inside the empty search box.Default: Search SaaSFlow | | Login text | Text | Text of the login link. Leave empty to hide it.Default: Log in | | Login URL | Link | Where the login link goes. | | Log in icon | Choice | An icon on the Log in button.Options: NoneFrom the icon libraryDefault: None | | Icon | Icon | Search HubSpot's icon library, for example user or right-to-bracket. | | Icon position | Choice | Where the icon sits on the button.Options: Before the textAfter the textDefault: Before the text | | Button text | Text | Text on the button. Leave empty to hide the button.Default: Get started free | | Button URL | Link | Where the button goes. | | Main button icon | Choice | An icon on the main button. A HubSpot CTA (below) shows its own design instead.Options: ArrowFrom the icon libraryNoneDefault: Arrow | | Icon | Icon | Search HubSpot's icon library, for example rocket or calendar. | | Icon position | Choice | Where the icon sits on the button.Options: After the textBefore the textDefault: After the text | | Main button: HubSpot CTA ID | Text | Optional. To use a HubSpot CTA instead of the button (so HubSpot tracks its views and clicks), paste the CTA's ID here. Find it in Marketing > CTAs: open the CTA and copy the number from the page address. Needs HubSpot's CTA tool. Leave empty to use the button. |
|
Language switcherGroup · 2 settings| Show language switcher | On/off | Appears only on pages that have translations.Default: On | | Label (screen readers) | Text | Default: Change language |
|
Interface labelsGroup · 10 settingsWords used on buttons and by screen readers. Change them to translate this module. | Skip link | Text | Link that lets keyboard users jump past the header.Default: Skip to content | | Logo link | Text | Read by screen readers for the logo link.Default: Home page | | Main menu | Text | Read by screen readers for the main menu.Default: Main | | Open menu button | Text | Read by screen readers for the mobile menu button.Default: Open menu | | Close menu button | Text | Read by screen readers when the mobile menu is open.Default: Close menu | | Search button | Text | Read by screen readers for the search icon.Default: Search | | Search submit button | Text | Text on the button in the search bar.Default: Search | | Close announcement button | Text | Read by screen readers for the button that hides the announcement.Default: Close announcement | | Back to top button | Text | Read by screen readers for the back to top button.Default: Back to top | | Submenu arrow (screen readers) | Text | Read out for the arrow beside a menu item that is both a link and a dropdown, followed by the item name.Default: Show submenu |
|
Style OptionsGroup · 10 settings| Header design | Choice | Overall layout of the header.Options: Design 1: Classic (one row)Design 2: Stacked (menu on its own row)Design 3: Pill (compact rounded bar)Design 4: Search bar (logo, open search and buttons, menu below)Default: Design 1: Classic (one row) | FontsGroup · 1 setting| Header font | Font | Starts as the theme's header font (or the body font when that is empty). Change it to use another font in the header only. |
| Announcement barGroup · 6 settings| Background | Choice | Kind of background for this box.Options: Brand gradient (primary to accent)Brand tint (follows light/dark mode)Solid colorCustom gradientDefault: Brand gradient (primary to accent) | | Color / gradient start | Color | The solid color, or the first color of a custom gradient.Default: #1E1B4B | | Gradient end | Color | Used by the custom gradient.Default: #7C3AED | | Gradient angle | Number | Direction of the gradient. 90 runs left to right, 180 top to bottom.Default: 90 | | Text color | Color | Used with a solid color or gradient. The brand tint uses the theme text colors.Default: #FFFFFF | | Text alignment | Choice | Alignment of the text.Options: CenterLeftDefault: Center |
| | Show bottom border | On/off | A thin line under the header.Default: On | | Logo alignment | Choice | Design 4 always keeps the logo on the left, next to the search bar.Options: LeftCenterDefault: Left | | Menu position | Choice | Used when the logo is on the left.Options: Next to the logoCenteredDefault: Next to the logo | | Header behavior | Choice | Whether the header scrolls away or stays at the top.Options: Static (scrolls away)Sticky (stays at the top)Floating (inset bar over the content)Default: Sticky (stays at the top) | | Transparent background | On/off | The header sits over the page's first section. Designs 1, 2 and 4: see-through until visitors scroll. Floating and Design 3 (pill): the bar keeps its background and floats over the section.Default: Off | | Mega menu icon color | Color | Leave empty to use the theme primary color. | Mega menuGroup · 12 settingsSize and layout of mega menu panels (desktop). Phones and tablets always show them as a simple list. | Panel width | Choice | Smart: each panel is as wide as its columns and featured card need, up to the maximum width, so a 2-column menu stays compact and a 4-column one grows.Options: Smart: fits its columnsFixed widthSame width as the header contentFull screen widthDefault: Smart: fits its columns | | Maximum width | Number | Smart: the widest a panel can grow. Fixed: the panel's width. Never wider than the screen.Default: 1200 | | Column width | Number | Ideal width of each column. Columns shrink a little when space is short.Default: 230 | | Featured card width | Number | Width of the featured card beside the columns.Default: 300 | | Featured card side | Choice | Which side of the columns the featured card sits on.Options: RightLeftDefault: Right | | Panel position | Choice | Lined up: the panel starts under the menu item and moves in just enough to stay on screen.Options: Centered under the headerLined up with its menu itemDefault: Centered under the header | | Space between columns | Number | Gap between columns and the featured card.Default: 32 | | Inner padding | Number | Space inside the panel edge.Default: 32 | | Lines between columns | On/off | A thin line between columns.Default: Off | | Show link descriptions | On/off | Off: a compact menu with just icons and labels.Default: On | | Dropdown opening animation | Choice | How dropdown lists and mega menus open on hover, and close again in reverse. Visitors who prefer reduced motion get a simple fade.Options: Curtain: drops down, items slide in one by oneFade in, items slide in one by oneSimple fadeNoneDefault: Curtain: drops down, items slide in one by one | | Animation speed | Choice | Options: FastNormalSlowDefault: Normal |
|
|
Footer
The footer has your logo and tagline, social links, up to several link columns, an optional newsletter sign-up, contact details, badges (for example security or award badges) and a bottom bar with the copyright and legal links.
- In the copyright text,
{year} becomes the current year and {company} your company name from the account settings. - The newsletter row only shows on the live site once you choose a HubSpot form with an email field.
- Search engines and AI adds organization structured data (your name, logo, social profiles and contact details) to every page.
All footer settings
| Setting | Type | What it does |
|---|
BrandGroup · 4 settings| Logo (for light backgrounds) | Image | Leave empty to show the logo text below with the theme's logo mark. | | Logo (for dark backgrounds) | Image | Shown when the footer is in dark mode. Leave empty to use the light logo. | | Logo text | Text | Shown when no logo image is set.Default: SaaSFlow | | Short description | Text | One or two sentences about the company.Default: The all-in-one platform to help your team build, grow and scale with confidence. |
|
Social linksRepeater · 2 settingsLeave the list empty to hide the icons. | Network | Choice | Sets the icon and the screen reader label.Options: LinkedInX (Twitter)FacebookYouTubeInstagramGitHubTikTokDefault: LinkedIn | | Profile link | Link | Your page on this network. Opens in a new tab. |
|
Link columnsRepeater · 4 settingsUp to five columns of links. Each column can use its own links or a HubSpot navigation menu. | Column heading | Text | Short heading above the links.Default: Links | | Links from | Choice | A HubSpot menu is edited in Settings > Content > Navigation menus.Options: Links belowA HubSpot navigation menuDefault: Links below | | Navigation menu | Menu | Top-level items of this menu are shown as the links. | LinksRepeater · 3 settings| Link text | Text | Text of the link.Default: Link | | Link | Link | Where this link goes. | | Badge | Text | Optional small label after the link, for example New or Hiring. |
|
|
NewsletterGroup · 4 settings| Show newsletter signup | On/off | A signup row above the links. It only shows on the live site once a form is chosen.Default: On | | Heading | Text | Short heading for the signup.Default: Get growth tips in your inbox | | Text | Text | What subscribers get, in one sentence.Default: One practical email a month on analytics, marketing and automation. Unsubscri... | | Form | HubSpot form | Choose a HubSpot form with an email field. Its submit button uses the theme's form button style. |
|
Contact detailsGroup · 3 settingsOptional. Each line shows only when it has a value. | Email | Text | For example hello@yourcompany.com. Shown as an email link. | | Phone | Text | Shown as a tap-to-call link. | | Address | Text | One line, for example 100 Market Street, San Francisco. |
|
Trust badgesRepeater · 4 settingsShort proof points shown as small pills, for example security or compliance standards you meet. Leave the list empty to hide them. | Icon | Choice | Small icon before the text. Choose Pick from icon library or Upload my own for any other icon.Options: ShieldLockCheck markGlobeStarLightning boltPick from icon libraryUpload my ownDefault: Shield | | Library icon | Icon | Search the Font Awesome library and pick an icon. It takes the icon color. | | Icon image | Image | A square SVG or PNG, at least 48 x 48px. Uploaded images keep their own colors. | | Text | Text | A few words, for example Privacy first.Default: Badge |
|
Bottom barGroup · 3 settings| Copyright | Text | {year} becomes the current year and {company} your company name from Settings.Default: © {year} {company}. All rights reserved. | Legal linksRepeater · 2 settings| Link text | Text | Text of the link.Default: Link | | Link | Link | Where this link goes. |
| | Show back to top link | On/off | A small link at the end of the bottom bar that scrolls to the top of the page.Default: On |
|
Search engines and AIGroup · 3 settingsStructured data that tells Google, Bing and AI assistants who you are. Added to every page that uses this footer. | Add organization structured data | On/off | Organization and WebSite schema: your name, logo, social profiles and contact details.Default: On | | Organization name | Text | Leave empty to use the company name from your HubSpot account settings. | | Short description | Text | One sentence about what you do. Leave empty to use the footer tagline. |
|
Interface labelsGroup · 5 settingsWords used by screen readers and small links. Change them to translate the footer. | Footer links | Text | Read by screen readers for the link columns.Default: Footer | | Social link | Text | Read before the network name, for example SaaSFlow on LinkedIn.Default: SaaSFlow on | | Legal links | Text | Read by screen readers for the legal links.Default: Legal | | Back to top | Text | Text of the back to top link.Default: Back to top | | Logo link | Text | Read by screen readers for the logo link.Default: Home page |
|
Style OptionsGroup · 7 settings| Color mode | Choice | "Same as" follows the footer color mode in Theme settings.Options: Same as Theme settings > FooterLightDarkDefault: Same as Theme settings > Footer | | Background | Choice | The footer color itself is set in Theme settings (Light and Dark mode colors).Options: Footer color with a soft brand glowFooter color onlyDefault: Footer color with a soft brand glow | | Link hover color | Color | Starts as the theme's primary color. | FontsGroup · 1 setting| Footer font | Font | Starts as the theme's footer font (or the body font when that is empty). Change it to use another font in the footer only. |
| | Social icons | Choice | How the social icons look.Options: In circlesIcons onlyDefault: In circles | | Show divider lines | On/off | Thin lines between the newsletter, links and bottom bar.Default: On | SpacingGroup · 4 settingsLeave empty to use the footer's default spacing. | Top padding (desktop) | Number | Space above the content on desktop. | | Bottom padding (desktop) | Number | Space below the content on desktop. | | Top padding (mobile) | Number | Space above the content on phones. | | Bottom padding (mobile) | Number | Space below the content on phones. |
|
|