Skip to content

Global Header Settings

How to configure the header for your HubSpot website theme

icon-module-header

WEBSITE HEADER

One of the key building blocks for your website, the header is the primary location where your site visitors will interact with your navigation menu.

header-layout-examples

Page Speed Impact

LOW

The header module has very little impact on page speed.

MEDIUM

Logo size and file format can impact your page speed if not sized appropriately.

TIPS

For the best quality, we recommend SVG for your logo sized at 120px wide.

FAQ

What is the proper format for the logo?

We highly recommend using an SVG file for the logo since it is vector based.

If you don't have an SVG file, we recommend converting your JPEG or PNG to WebP (files are ~26% smaller).

A width of about 120 pixels works best in our theme.

Why does the logo in the header module appear too large or too small?

You can configure the dimensions of the logos directly in the header module. Please watch this video for further insights.

HubSpot Video
Can I change the color of the header background?

Yes, the background color can be set by the color scheme choice field in the style area of the header module settings.

The color scheme colors can be set in the theme options in your HubSpot settings under Website > Themes > POWER THEME > Colors > Brand Colors

What if the header style does not work for the page design?

With POWER you can also switch between the regular "page" header, "landing page" header, even the "blog" header or you can change the header style settings at the page-level using “Page Settings”.

Choose the header type under "Page Settings" then click the dropdown to select one of the global headers:

select-header-footer-style-page-settings

This is also where you can choose to Overwrite Header Settings to make the header unique for the individual page:

header-overwrite

 

What does Sticky on Scroll mean?

Sticky on Scroll means that your main header and navigation will "stick" to the top of the screen as the user scrolls, allowing them to retain access to your menu without having to scroll all the way back to the top.

This helps improve the User Experience (UX) because they are able to easily access your menu if they don't find what they were expecting on the page they are on and ideally helps prevent them from leaving the page, reducing the bounce rate.

How do I access the Menu Settings?

The menus for your header can be set up under

Settings → Website  → Navigation

For detailed documentation and instructions, refer to Help with Navigation Menus.

What is Global Header Content?

The header for your Pages, Blog, Landing Pages, and System Pages are coded as Global Modules, which means that you have to access via the Global Content Editor and they are created and modified in one location and updated globally.

Global Header Content is the information included at the top of your website across all pages of your website.

Can I use a Custom Header?

Yes, if you have designed your own header it is possible to replace the POWER header.

Depending on how your header is coded and the associated CSS and JS, this can be very simple or very complex and typically requires a developer.

Setup Instructions

 

How to Set Up Global Header

Page Editor → POWER Header

To access the global header module, the easiest way is to create a website test page, select your child theme and a template, then click the Contents tab and choose "POWER Header" to open the Global Content Editor.
 
edit-global-header-page-editor

POWER Header → Global Content

Once you have accessed the global module, you will have the choice to set up 4 variations for the header.

global-content-header-types

We recommend configuring the header for all page types at the beginning, even if you don't plan on using one of them (i.e. blog or landing pages) so that you have a consistent starting point if anything changes.

It is also possible to override the default header for an individual page, so an unused header type could be styled for this situation.

Header Types for POWER Theme

  • PAGE header is the default for website pages
  • LANDING PAGE header is the default for landing pages
  • BLOG header is the default for the Blog Listing and Blog Post templates
  • SYSTEM PAGE header is the default for the 404, 500, and Search templates

While Subscription templates are system pages and they typically use the LANDING PAGE header, some accounts are using the PAGE header for these pages with no clear explanation from HubSpot.

Add Logo to HubSpot Website

Settings → Website → Pages → Branding

The header uses the pre-configured global logo that you can add to the Website Images in the Branding for your Domain.

This is also where you can set the favicon for your website, which is visible in the tab of most browsers.

hubspot-branding-logo-setup

We recommend using an SVG-file logo for the best rendering across all devices and browsers. Additionally, you can adjust the default size of the logo here. A width of about 120 pixels works best in our theme.

Publishing the Global Header

When you're ready to publish the Global Header, you'll click the orange Publish to X Assets button in the upper right corner. The number of assets corresponds to the total number of assets using this specific child theme that contains any of the header types.

publish-assets-hubspot-header

It is important to note that if you make a change to the BLOG Header, you'll have to publish the header to ALL assets, not just the blog assets. This is true for each Header Type, whether you are configuring every header or making a change to an individual setting - until you Publish to X Assets, your changes will not be visible on your preview pages and live site.

Module Options

There are some settings that are only visible based on previous choices, if you do not see the option available, it does not work with the layout or selections you've already made.

These settings are available for each Header Type. We recommend opening a second browser window once you have the PAGE Header configured to make it easier to apply the same settings for the other header types and modify as needed.

POWER Header → Logo

Option to Override default logo and Override Logo Sizes.

power-header-logo-settings

POWER Header → Sticky Logo

The Sticky Logo is the logo visible on scroll if you enable the setting for Fixed on Scroll in the Style settings. If you plan on changing the color scheme of the header from light to dark or dark to light on scroll, you'll want to override the default logo for the alternate color scheme to ensure the logo is visible.

Option to Override default logo and Override Logo Sizes.

header-sticky-logo

POWER Header → Menu

Option to Override Logo Link allows you to replace the preconfigured link from the global HubSpot settings. 

Check Header Menu Main to select your primary navigation. Help with Navigation Menus.

header-main-menu-1

POWER Header → Menu → Override Menu Position?

Check Override Menu Position to shift the location of your menu from the left to remove any overlap with your logo.

override-menu-position

POWER Header → Menu → Header Hamburger/Mobile Menu

Check Header Hamburger/Mobile Menu to select an independent navigation which will be shown in the hamburger sidebar or on mobile. If not active, the main menu will be used for the hamburger and mobile menu. Only works in combination with the active main header navigation and is designed to allow you to create a mobile-friendly version of your navigation if needed.

header-hamburger-mobile-menu

POWER Header → Menu → Header Top Menu

Check Header Top Menu to add a secondary menu bar above the header. This menu is not sticky on scroll and is often used for social icons and targeted menus.

The Top Menu does not display on desktop unless you check Top Header Desktop and on mobile unless you check Top Header Mobile in the checkbox under Layout → Choose Layout

header-top-menu-1

POWER Header → Contact Information

Check Contact Information to include contact information in the header.

Phone Link must be configured with the "+" at the beginning with all other symbols and spaces removed.

header-contact-information

Hover over the Phone Icon in the header to reveal the Contact Information.

POWER Header → Login

Check Login to include the login icon in the header.

header-login

Click the Person Icon in the header to access the Membership page link configured in the settings.

membership-login

POWER Header → Button Type of 1st Button

Choice of Button, CTA, or None.

For Button, additional settings are included to configure the 1st Button Title and 1st Button Link.

For CTA, make sure the CTA chosen is configured as "Link (No Style)" to avoid style conflicts.

button-in-header

POWER Header → Button Type of 2nd Button

Choice of Button, CTA, or None. Same setting options are available as 1st Button.

2-buttons-in-header

POWER Header → Search

Check Search to include search in the header.

header-search

When the Search Icon is clicked, the search function expands from the Header (example is dark scheme).

POWER Header → Search → Search Settings

Make sure that your Search page has been configured to use the POWER template for your child theme in your HubSpot settings: instructions to update system page templates.

Adjust Limit to determine how many results should display per page.

search-settings

POWER Header → Search → Search Settings → Search in Properties

search-in-properties-setting

POWER Header → Search → Search Settings → Search in Properties

search-in-page-types-setting

POWER Header → Social Icons

Click Add one to configure your first Social Icon for your header.

social-icons-in-header

POWER Header → Social Icons → Icon  Setup

add-social-icons-header

The social media accounts are shown in the header bar for the layouts “Landing Page”, “Burger”, and “Burger Only” as well as in the burger menu on mobile. There is also an option under Layout to move them to the Top Header.

Example of Social Icons on Landing Page header:

POWER Header → Layout → Choose Layout

This is where you'll choose the format your menu will be in.

menu-layout

  • Dropdown - classic dropdown menu where sub-menus fly out horizontally

  • Mega Menu - as wide as the menu content width

  • Mega Menu Content Width - as wide as the content container width

  • Mega Menu Screen Width -stretches over the full width of the window/screen

  • Burger - reduces the menu to a hamburger icon which reveals the full menu in a sidebar

  • Burger Only - shows all header elements in the sidebar only

  • Landing Page - reduced menu to improve conversions. This layout shows social icons, but a simple top-level menu can also be added.

POWER Header → Layout → Top Header Desktop

Check Top Header Desktop to activate the top header bar above the main header. If you configured a menu under Menu → Top Header Menu, it will appear now.

top-header-and-social

Once checked, you will also see additional options under Social Icons for Use Social Icons in Header and Use Social Icons in Top Header.

Check Flip Order of Top Bar Elements if you want to move the top bar elements from the left to the right.

Check Top Header Mobile if you would like to add a button next to the burger on mobile for the Top Header.

top-header-mobile-button

Check Hide Hamburger Icon? to hide the hamburger even if there is content in the sidebar menu.

POWER Header → Style

Set the Color Scheme for your Header elements.

style-color-scheme-header-settings

POWER Header → Style → Color Scheme Header

Choice of Light or Dark for the main header.

The light scheme shows a light background color and a dark font and the dark scheme shows a dark background color and a light font color as defined in the Theme Settings for your child theme.

POWER Header → Style → Color Scheme Top Bar

Choice of Light or Dark for the top header.

The light scheme shows a light background color and a dark font and the dark scheme shows a dark background color and a light font color as defined in the Theme Settings for your child theme.

POWER Header → Style → Color Scheme Dropdown

Choice of Inherit, Light or Dark for the dropdown and mega menu(s).

Inherit will use the same color scheme as chosen for the main header.

The light scheme shows a light background color and a dark font and the dark scheme shows a dark background color and a light font color as defined in the Theme Settings for your child theme.

dropdown-menu-color-scheme

POWER Header → Style

Additional style settings for your header and top header.

header-style-options

Check Transparent Header to remove the background from your header to see the page content behind.

Check Transparent Top Header to remove the background from your top header to see the page content behind.

Check Glassmorphism Header to remove the background from your header to see the page content behind.

Additional settings are available to adjust the color scheme.

glassmorphism-header-settings

Social Icon color can be adjusted in Theme Settings → Color → POWER → Light Scheme → Other → Social

glassmorphism-header-style

Check Glassmorphism Top Header to remove the background from your top header to see the page content behind.

glassmorphism-top-header-style

Check Content Full Width to stretch the header content to the window borders instead of the container width (not recommended).

POWER Header → Style

Check Fixed on Scroll to make the main header sticky, so the header/navigation sticks to the top of the page as the user scrolls.

Option to change the Space between menu items to adjust how your menu fits in the header.

Choices are Normal (50px), Narrow (32px), and Narrow (24px).

With Fixed on Scroll activated, you'll see an option to set Color Scheme On Scroll to Light or Dark. If different choice from Color Scheme Header,make sure your sticky logo color works with the alternate color scheme.

space-between-menu-items

Option to set Scroll Shadow for use with Burger menu on mobile, if the container is filled with content, this provides an indicator to the user to scroll. Chocies are Same as Background Color or None.

POWER Header → Style → Language Switcher

Check Dropdown arrow for language selector to add an optional indicator to change the language for multi-language pages.

Creating translated pages will automatically show the language switcher in the header bar.

activate-language-selector

Without arrow (default - this displays automatically):

With arrow indicator enabled:

language-switcher-indicator

POWER Header → Style → Button/CTA

Option to configure the Button/CTA Style for each button.

Option to configure the Button/CTA Size for each button.

For a detailed explanation of options, refer to CTA settings.

activate-language-selector

POWER Header → Standard Text/Translations

Option to change or translate the standard text used throughout the header.

standard-text-translation-header-settings

Option to change or translate the standard text used throughout the burger menu.

text-translations-for-header

Configurations

Header with Dropdown Menu

header-dropdown-example

Layout > Choose Layout

Dropdown

Style > Transparent Header

Activated

Style > Color Scheme

Dark

Header with Mega Menu

header-mega-menu-example

Layout > Choose Layout

Mega Menu

Style > Transparent Header

Activated

Style > Color Scheme

Dark

Header with Mega Menu

glassmorphism-header-example

Layout > Choose Layout

Mega Menu

Style > Glassmorphism Header

Activated

Style > Color Scheme

Light

Next Steps

Now that your header is set up, you can set up your footer.

Next up:

NEVER MISS A POWER UPDATE

We are continuously improving our modules and updating our documentation. Stay in the loop.