Header 5

Previews

Default

Act3 Header 5 - Default - Preview

Sticky

Act3 Header 5 - Sticky - Preview

Overlapping

Act3 Header 5 - Overlapping - Preview

Content

Act3 - Header 5 - Logo preview

There are three Logo modules for each header instance:

Act3 - Header 5 - 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)
  • Sticky header logo, if you enabled this option in the theme settings
    (suggestion: your logo mark/icon; a smaller version of your logo to keep the sticky header small)
Note: If you want to use the same version of your logo for all header instances you can select the same image on all three modules.

Act3 - Header 5 - Navigation preview

Act3 - Header 5 - 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 5 - Navigation modules

To format your menu items like this:

Act3 - Header 5 - Navigation - Menu example

... you need to add some <span> wrappers to your item name in the menu editor (Settings > Website > Navigation):

Act3 - Header 5 - Navigation - Menu example

With badge:

<span class="super-text">Drag’n’Drop</span>Page Editor<span class="badge badge--small badge--accent">New</span>

Without badge:

<span class="super-text">Drag’n’Drop</span>Page Editor

Language selector

Act3 Header 5 - Language selector preview

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

Act3 - Header 5 - Enable language selector - Step 1

Act3 - Header 5 - 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 5 - 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 5 - Button preview

There are three Button modules for each header instance:

Act3 - Header 5 - Button modules

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

Act3 Header 5 - Search preview

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

Act3 - Header 5 - Enable search - Step 1

Act3 - Header 5 - 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 5 - Search module