Header 3

Previews

Live previews: Static | Overlapping

Default

Act3 Header 3 - Default - Preview

Sticky

Act3 Header 3 - Sticky - Preview

Overlapping

Act3 Header 3 - Overlapping - Preview

Content

Act3 - Header 3 - Logo preview

There is one Logo module for the static header and another for the overlapping header:

Act3 - Header 3 - Logo modules

  • Static header logo
    (suggestion: your default logo version)
  • Overlapping header logo
    (suggestion: a white version of your logo; a logo that works great on dark background images or colors)
Note: If you want to use the same version of your logo for both header instances, you can select the same image on both modules.

Icons

Act3 - Header 3 - Icons preview

You can enable/disable the icons in this header by checking/unchecking this box:

Act3 - Header 3 - Enable icons - Step 1

Act3 - Header 3 - Enable icons - Step 2

You will need to force a browser reload (Cmd+R/Ctrl+R) after applying this change, so the included Icon modules appear/disappear in the content sidebar. There is one module for the static header and another for the overlapping header:

Act3 - Header 3 - Icon modules

  • Static header icons
  • Overlapping header icons
    (make sure these icons will be visible on dark background images or colors)
Note: On mobile these icons are hidden, but you can include icons in the Mobile navigation module.

Info

Act3 Header 3 - Info preview

You can enable/disable the info in this header by checking/unchecking this box:

Act3 - Header 3 - Enable info - Step 1

Act3 - Header 3 - Enable info - Step 2

You will need to force a browser reload (Cmd+R/Ctrl+R) after applying this change, so the included Info rich text module appears/disappears in the content sidebar:

Act3 - Header 3 - Info rich text module

Please keep the content of this module simple, maybe only one short line of text with your phone number or quick info.

Language selector

Act3 Header 3 - Language selector preview

You can enable/disable the language selector in this header by checking/unchecking this box:

Act3 - Header 3 - Enable language selector - Step 1

Act3 - Header 3 - Enable language selector - Step 2

You will need to force a browser reload (Cmd+R/Ctrl+R) after applying this change, so the included Language selector module appears/disappears in the content sidebar:

Act3 - Header 3 - Language selector module

The language selector will appear only on translated pages and blog posts (see: https://knowledge.hubspot.com/website-pages/create-pages-in-multiple-languages)

Button

Act3 Header 3 - Buttons preview

There is one Button module for the static header and another for the overlapping header:

Act3 - Header 3 - Button modules

  • Static header buttons
  • Overlapping header buttons
    (make sure these buttons will be visible on dark background images or colors)
Note: On mobile these buttons are hidden, but you can include buttons in the Mobile navigation module.

Act3 Header 3 - Search preview

You can enable/disable the search in this header by checking/unchecking this box:

Act3 - Header 3 - Enable search - Step 1

Act3 - Header 3 - Enable search - Step 2

You will need to force a browser reload (Cmd+R/Ctrl+R) after applying this change, so the included Search module appears/disappears in the content sidebar:

Act3 - Header 3 - Search module

Act3 - Header 3 - Navigation preview

Act3 - Header 3 - Mobile navigation preview

There is a Navigation module for the desktop version and a Mobile navigation module for mobile, where you can also add the various elements specific to a header:

Act3 - Header 3 - Navigation modules

On desktop you can also make the nav items stretch to fill the entire container or stack naturally to the left. This may be useful if your menu contains just a few items. You can enable/disable this by checking/unchecking this box:

Act3 - Header 3 - Navigation fill the entire row - Step 1

Act3 - Header 3 - Navigation fill the entire row - Step 2

Enabled:

Act3 - Header 3 - Navigation fill the entire row - Enabled

Disabled:

Act3 - Header 3 - Navigation fill the entire row - Disabled