Site header

Set it up

Create or open a navigation menu under Settings → Content → Navigation menus. Items with child pages open as dropdowns, and a third level shows as groups inside the dropdown.
Open a page that uses an Omni template, click the header and choose Edit global content.
Select the Site header module and pick your menu under Navigation → Menu.
Change the buttons under Buttons and publish the global content.

Setting	What it does
Logo	Uses the logo from Settings → Branding. Override it to show a different logo in the header only
Logo on dark backgrounds	Shown while the header is in Dark color mode. Leave it empty and the normal logo is drawn in white; the Logoipsum placeholders switch to their light versions
Placeholder until the brand kit has a logo	Logoipsum horizontal, stacked or badge, or the company name
Logo link	Leave empty to link to the home page
Navigation → Menu	The navigation menu in the header and in the mobile menu
Buttons	Up to two link buttons or HubSpot CTAs, for example Log in as a text link next to a primary button
Behavior	Keep the header at the top while scrolling, and make it compact after scrolling
Accessibility labels	Texts for screen readers: Skip link, logo link, open and close menu, submenu buttons

Setting	Options
Styles → Layout	Content width (aligned with the page or full width), menu position (next to the logo, centered or next to the buttons), header height, compact height and logo width on desktop and mobile
Styles → Background	Color mode (Use theme setting, Light, Dark), then the light-mode colors: Background, background after scrolling, blur and border after scrolling. Dark paints the bar, the dropdown panels and the mobile menu with the dark palette, see Color modes
Styles → Text	Menu font, menu color, and the hover and active color
Styles → Dropdowns	Dropdown background, text color and corner radius
Styles → Mobile menu	Background of the mobile menu
Styles → Animation	Use theme setting, on or off for dropdowns, the mobile menu and the compact header

The colors start from Theme settings → Website header, so you can set them once for the whole site.

Until a menu is selected, the header shows the logo and the buttons. In the editor it reminds you to choose a menu.
The mobile menu takes over below 1024 px. Keep the top level to five or six items so it fits in one row on laptops.
When a page has published translations, the language switcher appears next to the buttons.
Keyboard users open a dropdown with the arrow button next to a menu item (Arrow Down moves into it) and close it with Escape.
Landing pages use the header without navigation, which only shows the Site logo module.
Logo width and Logo width on mobile take any number of pixels. The logo still never gets taller than the header bar or wider than its space.