Header

⚠️ If you purchased the full pack instead of the theme, please read the documentation of the full pack here

Introduction

The POWER header is defined as a global element in all POWER templates. This means that your changes to the header will take effect on all pages derived from POWER templates.

If you are editing those pages in HubSpot’s page editor you can access the POWER Header module settings through the global content editor by clicking on “Content” -> “POWER Header”.

contents-power-header

Once you have accessed the global module, you will have the choice to setup 3 variations for the header:

global-content-header

The PAGE header is the default for website pages and some system page templates, the LANDING PAGE header is the default for landing pages and other system page templates, and the BLOG header is the default for the Blog Listing and Blog Post templates.

Page Settings: What if the header style does not fit the page you are building?
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:

page-settings-header

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

header-overwrite

The style settings allow you to switch dark and light schemes, make the header transparent, show a header top-bar, hide the CTA, or show a different one.

 

Logo

The header uses the pre-configured global logo from “Settings” → “Website” → “Pages” → “Branding”. If you want to overwrite the global logo upload or select a logo from the file manager. We recommend using an SVG-file logo for crisp visualization. Additionally, you can adjust the size of the logo. A width of about 120 pixels works best in our theme.


The same applies to the sticky logo. The sticky logo appears on scroll down in the sticky header bar. You probably only need to configure a different logo here if the dark/light color scheme for the sticky header bar is different from the header bar.

 

Header Menu

After activating the “Header menu”-switch, a previously configured HubSpot menu can be selected in the drop-down menu.

Menus can be created and edited under “Settings” → “Website” → “Navigation”.

 

Header Top Menu

Activating the menu will show your selected HubSpot menu on the left-hand side of the top bar if activated.

 

Contact Information

Mouse-over on the phone icon shows the configured Phone and Email. Make sure the phone link is the same phone number, without spacings and without brackets.

 

Search


Turning on the Search switch will enable the search function in the header bar.

 

Language Switcher


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

 

CTA

Activating the CTA switch will open up the CTA selector where predefined CTAs can be selected. They will be shown in the right upper part of the header. CTAs can be created under “Marketing” → “Lead Capture” → “CTAs”. For more information on how to create CTAs please move on to the → CTA section of this documentation.

 

Social Icons

The social media accounts which will be shown in the header bar for the layout “Landing Page”, “Burger”, “Burger Only” as well as in the burger menu on mobile, can be configured here. E.g. the “Landing Page” Layout will result in the following:

If you use a top header you can additionally define the social icons to be used there instead or as well. The configured social icons will be shown on the right-hand side of the top bar.

 

Layout

The “Layout” area provides multiple header layouts. Three of them are for mega menus.

1. “Mega Menu”
Mega menu is as wide as the menu content width.

2. “Mega Menu – Content Width”
Mega menu is as wide as the content container width.

3. “Mega Menu – Screen Width”
Mega menu stretches over the full width of the window/screen.

The mega menus can be configured under “Settings” → “Website” → “Navigation”.

Other layouts are:

4. “Dropdown”
Classical dropdown menu where sub-menus fly out horizontally.

5. “Hamburger”
This layout reduces the menu to a hamburger icon which reveals the full menu in a sidebar.

6. “Hamburger only”
This shows all header elements in the sidebar only.

7. “Landing Page”
Landing pages pursue the goal to convert. The focus should be set to the content and links, menu entries or any other distractions should be reduced. In this layout only the configured social icons are shown.
However, you can also use a simple top-level menu here.

 

Top Header Option

 

Style

This section focuses on the visual appearance of the header bar. The following options can be configured:

1. Color Scheme Header: Light | Dark. The light scheme shows a light background color and a dark font. The dark scheme shows a dark background color and a light font color. The light and dark colors are pulled from the CSS-file. This option also affects the colors of the drop-down or mega menus.

2. Color Scheme Top Bar: Light | Dark. The light scheme shows a light background color and a dark font. The dark scheme shows a dark background color and a light font color. The light and dark colors are pulled from the CSS-file.

3. Transparent Header: Turning on this option removes the background color of the header bar. The underlying visual (background color, background image or video) will be visible.

4. Transparent Top Header: Turning on this option removes the background color of the header bar. The underlying visual (background color, background image, or video) will be visible.

5. Content Full width: This option stretches the header content to the window borders instead of the container width.

6. Fixed on Scroll: Activates the “sticky”-bar. If activated the header scrolls with the content.

7. Color Scheme On Scroll: Similar to Color Scheme, also the color scheme of the sticky bar can be styled in light or dark.

8. CTA Style: You can select the best fitting CTA style. You will find an overview of all the CTA styles → here.

9. CTA Size: configures the size of CTA button. Choose “Regular” or “Long”. Check → this section for a visual reference of the CTA sizes.