Help Center
Header and Footer
Build your site's header and footer in the same visual builder - settings-bound Menu and Logo elements, sticky options, and mobile navigation.
Last updated
The header and footer are not hardcoded templates - they are sections you edit in the same builder as your pages. Each site stores one header and one footer, built from the same Sections, Rows, Columns, and elements, plus two settings-bound elements made for the job: Menu and Logo.
Opening the Header or Footer Builder#
- Open the site's pages list in the portal
- Click Edit Header (or Edit Footer) beside New Page
- The builder opens in a focused single-section mode: you are editing just the header (or footer) section, not a page
Everything you know from the page builder applies - the Inspector, native fields, undo, and the device preview.
The Menu Element#
The Menu renders your site navigation. It is bound to the navigation items defined in Site Settings, so you manage the actual links in one place and the Menu element decides how they look in the header.
| Field | Options |
|---|---|
| Alignment | Left, Center, Right |
| Item Gap | Default, Small, Medium, Large |
| Mobile Hamburger | Collapse the menu into a hamburger on phones |
| Mobile Menu Style | Dropdown (default), or Slide-in drawer (off-canvas panel with overlay) |
| Link Color / Link Hover Color / Dropdown Background | Default, Primary, Secondary, Muted, Dark, Light (each set separately) |
Nested navigation items render as hover dropdowns on desktop and expand inside the mobile menu.
The Logo Element#
The Logo element renders the logo image and site name from Site Settings - swap the logo file once and every page updates. Configure its Link (usually home), Max Height / Max Width, and Alignment. See Media Elements.
Sticky Header#
The header builder has a Sticky header toggle that keeps the header pinned to the top of the viewport as visitors scroll. Its scope can be:
- Off - the header scrolls away normally
- All screens - pinned everywhere
- Mobile only - pinned on phones, normal on desktop (useful when the desktop design wants a tall header but mobile users need the menu and call button in reach)
A Typical Header Build#
- One Section (the header band), one Row: Fixed-Left layout or Halves
- Left column: a Logo element
- Right column: a Menu element, alignment Right
- Optional: a Button element with your main CTA after the Menu
- Toggle Sticky header on, scope to taste
- Save
A Mobile Call Bar#
Combine features you already know:
- In the header, add a Column set to Show on: Mobile only (Rows have no Show on control; Columns do)
- Put Click to Call and a quote Button in it
- Set sticky scope to Mobile only
Desktop visitors see a clean header; phone visitors always have the call button on screen.
Fallback Chrome#
If a site has no built header or footer yet, published pages fall back to a clean default generated from Site Settings (logo, site name, navigation items). That means a brand-new site is never chrome-less - but once you want design control, build the real thing here.
IDs Inside the Header and Footer#
On the published site, every element ID you set inside the header or footer gets a prefix: hc- in the header and fc- in the footer. An element with the ID contact in your footer publishes as fc-contact. This keeps a style written for a header or footer element from reaching into the page body.
Styling you write in an element's own CSS box carries over untouched, because the rule and the element are renamed together. Three things need the prefixed ID, and only if you wrote them yourself:
- A link that jumps to an element inside the header or footer (
#contactbecomes#fc-contact) - A custom CSS rule in Site Settings that targets a header or footer element by ID
- A script that looks up a header or footer element by ID
Links and rules aimed at the page itself are unaffected, and so is the skip-to-content link. The mobile menu toggle on the fallback header is hc-tpl-nav-toggle. This changed in version 2.0.0; each site picks it up the next time you deploy it.
Going Live#
The header and footer are content, exactly like pages: saving them updates the CMS, and the live site changes only on the next manual Deploy. Since the header appears on every page, give it a quick check in the deploy preview before shipping.
Summary#
| Task | How |
|---|---|
| Edit navigation links | Site Settings (the Menu element renders them) |
| Change the logo everywhere | Site Settings logo (the Logo element renders it) |
| Pin the header | Sticky header toggle: All / Mobile only |
| Off-canvas mobile menu | Menu: Mobile Menu Style, Slide-in drawer |
| Mobile-only call bar | Mobile-only Section + Click to Call + sticky Mobile only |