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.
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
- Choose the header (or footer) edit entry
- 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 style | Default dropdown, or Slide-in drawer (off-canvas panel with overlay) |
| Color style | Default, Primary, Secondary, Muted, Dark, Light |
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 devices - 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 second Row (or Section content) with Show on: Mobile only
- 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.
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 style, Slide-in drawer |
| Mobile-only call bar | Mobile-only Section + Click to Call + sticky Mobile only |