Build your site's header and footer in the same visual builder - settings-bound Menu and Logo elements, sticky options, and mobile navigation.
Loading the guide...
Help us make the guides more useful.
0 helpful · 0 not helpful
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.
Everything you know from the page builder applies - the Inspector, native fields, undo, and the device preview.
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 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.
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:
Combine features you already know:
Desktop visitors see a clean header; phone visitors always have the call button on screen.
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.
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:
#contact becomes #fc-contact)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.
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.
| 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 |