Contact UsAgency Pass

Header LP 1

This page focuses on Header LP 1. For a better understanding of general settings—like selecting a header, color schemes, content width, overlapping headers, and editing header content—we recommend reading the main Header documentation first.

Please note:

As a best practice for landing pages, Act3 LP headers are non-sticky and exclude navigation or search, keeping visitors focused on the form or call to action.

There are two Logo modules: one for the default header state and one for the overlapping header. You need to provide a logo for each, even if they are identical:

This is the logo displayed by default in the regular header.

This is the logo shown when the header overlaps content. Make sure it’s clearly visible on dark backgrounds. You will likely need to add a white version of your logo.

Logo size

If your logo appears too large or too small on desktop or mobile, first try resizing the image:

If it’s still not working, the logo may be limited by its column size. In that case, you can adjust it in the Contents sidebar on the left, where you'll find settings to modify the logo column size for all three breakpoints:

The values for Logo column width are based on a 12-column grid. For example, 6 means the logo takes up 6 out of 12 columns (half the width), 3 is a quarter of the width, and 2 is one-sixth. You can set different values for large, medium, and small screens. Only one of these values should be used: 2, 3, 4, 5, or 6.

Language selector

Enable or disable the language selector in your header by checking or unchecking this box:

You need to save your changes and reload the browser page to see them take effect.

If the language selector is enabled for your header, you’ll see the Language selector module in the sidebar, where you can configure it:

Keep in mind that if enabled, the language selector will appear only on multi-language landing pages. If your page doesn’t have multiple languages, it won’t show up.

To create multi-language content, please refer to these HubSpot articles:

You can also translate your global header and footer by creating multi-language variations in the global content editor: Edit global content in multi-language pages.

Buttons

There is a Button module for each header state, so you need to add buttons for all three, even if they are identical:

Static header buttons

These are the buttons displayed by default in the regular header.

Overlapping header buttons

These are the buttons displayed when the header overlaps content. Make sure they remain visible on dark backgrounds.

Sticky header buttons

These are the buttons that are shown in the sticky header. You can use smaller buttons to keep the sticky header small.

Please note:

  • You can add one or multiple buttons in Act3's Button module.
  • On mobile, you can add buttons in the Mobile navigation module.

Icons

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

You need to save your changes and reload the browser page to see them take effect.

If icons are enabled for your header, you will see two Icon modules in the sidebar: one for the static header and another for the overlapping header.

Static header icons

These are the icons displayed by default in the regular header.

Overlapping header icons

These are the icons displayed when the header overlaps content. Make sure they remain visible on dark backgrounds. You will likely need to add white icons for the overlapping header.

Please note:

On mobile these icons are hidden, because they may not fit.

Info

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

You need to save your changes and reload the browser page to see them take effect.

If the info is enabled for your header, you’ll see the Info module in the sidebar, where you can edit its content. This is actually a default Rich Text module:

For the best results, keep the content of this module simple—perhaps just one short line of text with your phone number or quick info.

The Mobile navigation module also has an Info section, where you can display similar content. Making changes here will not update the info in the mobile menu. You need to edit your Mobile navigation module to change the info there.

Above the header

If you want to add a top bar or display information above the header, you can use the drag-and-drop area at the top. Here, you can add modules, change the section background, adjust padding, and more.

Skip to content label

If you enabled this option in your Theme Settings, you can change the label of the skip-to-content link here:

The default content is:

Skip to content <span class="badge badge--medium badge--white">↵ ENTER</span>