Modules
Site header
The bar at the top of every page: Your logo, your navigation menu, up to two buttons and a mobile menu. It stays at the top while visitors scroll and becomes slightly more compact.
On this page
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.
What you can change
| 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 |
Mega panels (OMNI Pro)
Content → Pro: Mega panels turns a top-level menu item into a designed panel that spans the page below the header. Write the item's text under Menu item, exactly as it reads in the menu, and the panel replaces its dropdown. The item then opens the panel instead of going to its own page, so put a link to that page inside the panel.
- Pick Columns, from one to five. The columns are always equal and the gap is always the same, so every panel lines up.
- Add one Block per column and pick its Block type. A block can span several columns.
- Optionally add a Strip along the bottom: Light (text and a link) or dark (text and a button).
| Block type | What it shows |
|---|---|
| Intro | A heading, a short text and a link |
| Link list | Titles with a line of description under each |
| Link rows | Titles with tags and a hairline between rows, in one or more columns |
| Grouped links | Groups with a heading that flow down and across the columns. Start a group by writing a Group heading on its first link |
| Form | A HubSpot form in a tinted card. It loads the first time the panel opens, so pages stay fast. Without a form, the card shows a button |
| Card | A picture, a heading and a text, linked as a whole |
| Highlight | A line, a big number with a caption, and a button |
| Page preview | The picture, title and description of the grouped link under the pointer. Turn on Show a page preview in the Grouped links block of the same panel |
| Contact tiles | Tinted tiles numbered 01, 02, 03. A Dark tile shows the logo mark instead |
| Thumbnails | Portrait pictures with a title and two text links, for example Free and Pro |
Tags. Every link can carry Hot, New and Pro. Hot and New are marketing and can be switched off for all panels at once under Pro: Mega panel options; Pro is information and always shows. The same options hold the tag texts and the small white Mark used on the form tile, the dark tile and a card without a picture.
On a phone the blocks stack under the menu item in the mobile menu, and the page preview is left out.
Choose the look
| Setting | Options |
|---|---|
| Styles → Layout | Content width (aligned with the page, wide at 1440 px, 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.
Good to know
- 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. On a wider screen, a menu row that does not fit — many items, a search button and two buttons on a laptop — folds into the same burger menu instead of running off the edge, and comes back as soon as the window is wide enough. Keeping the top level to five or six items keeps the row on laptops.
- A menu tag (New, Hot) follows its page into a dropdown, so an item you move under a parent keeps its tag.
- 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.
More in this category
Keep reading
Support
Did this answer your question?
If not, write to us and say which page you were on.