Skip to content
maka-img_mm_marketplace
maka marketplace

Discover Products to help you POWER up with CMS Hub

maka-img_mm_power-pro
Power Pro Theme

Check out the POWER demo and see all the latest features

maka-img_mm_performance
Performance

POWER is optimized to perform, review the results

maka-img_mm_customer-showcase
Customer Showcase

See how our customers used the POWER Theme

POWER Pro V25 released on August 18th 2022 – Read Changelog

maka-img_mm_documentation_3
Getting Started

Follow our guide to save time and avoid missing a step

maka-img_mm_module-library
Module Library

From page speed impact to set up instructions, you'll find it all

maka-img_mm_video-tutorials
Video tutorials

Find all POWER videos in the same spot for quick answers

maka-img_mm_faq
FAQs

Have questions?
We have answers

Experiencing an issue with POWER? Submit a support ticket here

maka-img_mm_about-us
About us

“Would I rather be feared or loved? Easy. Both. I want people to be afraid of how much they love me.”
– Michael Scott, not us

maka-img_mm_blog
Blog

This is mostly a demo right now. We are working on some really cool things around the office.

maka-img_mm_career
Career

Quite possibly the most fun you will have at work, ever. Did we mention how cool we are?

Having issues with POWER?
SUBMIT A SUPPORT TICKET


Schedule a Q&A or Demo
PREPURCHASE CONSULTATION


Looking for Custom Development?
REQUEST A QUOTE


Other questions?
CONTACT US / LIVE CHAT

LIVE Chat 7CT AM – 7CT PM – Get in touch here

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

 

How do I remove the POWER logo from system page and email templates?

The POWER logo is showing on your system page templates for one of two reasons.

1 - you haven't set the template to the child theme for your system and email templates.

2 - you haven't configured the Landing Page AND System Page header/footer

Originally, all of these pages used the Landing Page header. We were able to identify a way to isolate the System Pages to allow more flexibility to include navigation (especially important for 404 and search) so we created an additional header/footer group for System Pages.

Here is a list of which template uses which header:

1. Error Page 404  - SYSTEM PAGE

2. Error Page 500 - SYSTEM PAGE

3. Password Prompt - SYSTEM PAGE

4. Search results page - SYSTEM PAGE

5. Email Subscription Preferences - LANDING PAGE

6. Email Unsubscribe Page - LANDING PAGE

7. Email Subscription Confirmation - LANDING PAGE

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.

How do I set up the advanced mega menu from v25?

Step-by-Step Instructions coming soon for the Advanced Mega Menu, please submit a ticket if you have questions.

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.

contact-settings-header

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

POWER Header → Contact Information → Contact Icon

Choice of Phone, Mail, or Message icons for use in the header.

contact-information-header

Preview of the Phone Icon

contact-icon-phone

Preview of the Mail Icon

contact-icon-mail

Preview of the Message Icon

contact-icon-chat

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

contact icon hover state showing phone and email 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

POWER Header → Social Icons → Use Social Icons in Header

Option to include the social icons in the desktop header. You will have to be careful how many settings you enable in the header as the social icons won't fit if you have too many options selected. There is also an option under Layout to move them to the Top Header.

social-icons-header

POWER Header → Social Icons → Use Social Icons in Burger

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. 

Example of Social Icons on Landing Page header:

social icons on landing page header

POWER Header Menu Layout Settings

POWER Header → Advanced Mega Menu

Advanced Mega Menu for Desktop only, all other devices will use the existing menu as configured.

Header-Advanced-Mega-Menu

If you are using the Advanced Mega Menu the Layout needs to be set to Dropdown or one of the Mega Menu choices, it is not compatible with the Burger, Burger Only, or Landing Page.

Step-by-Step Instructions for the Advanced Mega Menu

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

classic dropdown menu with sub-menu fly out horizontally

  • Mega Menu - as wide as the menu content width

mega 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

mega meu screen width

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

burger menu sidebar expanded

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

burger only header option

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

landing page header option with social icons

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

top header desktop added with menu and social icons

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 Settings

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 light color scheme

power header dark color scheme

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 top header light color scheme

power top header dark color scheme

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.

transparent header for power theme

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

transparent top header for power theme

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).

content full width stretches header to window borders

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):

header menu showing language switcher dropdown

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.