Header 6

This page focuses on Header 6. 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.

Contact

Enable or disable the contact 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 contact info is enabled for your header, you will see two Properties modules in the sidebar: one for the static header and another for the overlapping header.

Static header contact

This is the contact info displayed by default in the regular header.

Overlapping header contact

This is the contact info displayed when the header overlaps content. Make sure it remains visible on dark backgrounds. Set this module to the Dark color scheme, and you will likely need to use white icons.

Please note:

Some settings in these two modules are overridden specifically for this header, so not everything will work exactly as it does in the page editor.
On medium and smaller screens, this contact info is hidden, but you can include it in the Mobile navigation.

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.

In this header, the language selector is divided into two modules: on desktop, it appears in the top bar, which isn’t visible on mobile, while on mobile it’s in the main header section. If the language selector is enabled for your header, you’ll see the Language selector and Mobile language selector modules in the sidebar, where you can configure them:

Keep in mind that if enabled, the language selector will appear only on multi-language pages or blog posts. 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.

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 medium and small screens these icons are hidden, but you can include icons in the Mobile navigation.

Logo

There is one Logo module for each header state, so you need to provide a logo for all three, 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.

This is the logo shown in the sticky header. To keep the sticky header compact, you may want to use just the logo mark or a smaller version of your full 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.

This is the menu displayed on desktop.

You can select an existing menu that you have already created in your HubSpot account, or create a new one. Learn more about HubSpot menus.

If you want to add a Mega Menu, please watch this YouTube video: Act3 — Mega menu.

If the menu breaks into multiple lines, you may need to adjust the Logo column width. It could also be caused by having too many menu items or long text. In that case, consider restructuring the menu or making the header (or the website) wider. Keep in mind, though, this may not prevent it from breaking on smaller screens.

If your menu text doesn’t match your header’s color, the module may be using a different color scheme than the header itself. Please see the Header color scheme for guidance.

The Mobile navigation is a different module than your desktop Navigation:

This module includes all content options from your desktop header—links, icons, buttons, and more—so you need to add your mobile content here.

Desktop and mobile content are kept separate because many websites use slightly different, more mobile-friendly navigation.

Even if your content is the same, you still need to manage it separately in the Mobile navigation module. It may seem inconvenient at first, but it lets you customize navigation specifically for mobile if needed.

Search

You can enable or disable the search 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 search is enabled for your header, you’ll see the Search module in the sidebar, where you can configure it (change labels, set the domains to be searched, and more):

Act3 displays search results in a full-screen window on the current page without navigating away. This is fast and convenient for users, so you don’t necessarily need to rely on a separate search results page. We actually include a search results page because it’s required by the HubSpot Templates Marketplace, but Act3 doesn't need it.

For more information on HubSpot's Site Search feature, see the Site Search | Frequently Asked Questions.

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.

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.

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.

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>

Header 6