Header

The site_header is the top chrome of the page — logo / site name, navigation menu, optional CTA button, plus optional bits like a top-bar announcement, cart, and account icon.

It's a single block per page (additional headers are silently ignored). The same header configuration can be saved to the Library for reuse across pages.

When to use it

Marketing site header with logo + nav + primary CTA
E-commerce header with cart + account icons
Minimal header with just a logo and a single CTA

When not to use it

For section-level navigation inside a page — use a regular

Section with a button row instead

For a sticky mid-page anchor nav — use a Section with custom CSS

Top of panel

Save to Library — button

Saves the current header configuration to the team library. Useful when you've tuned a header and want to drop the same one into another page.

Layout — button group: Left · Center · Right (default: Left)

Where the logo / site name sits. The menu fills the rest of the row.

Sticky mode — button group: Static · Sticky · Auto-hide (default: Static)

Static — header scrolls away with the page
Sticky — header stays at the top while scrolling
Auto-hide — header hides while scrolling down, reveals when

scrolling up

Toggles (4 pairs)

Two columns of checkboxes. Each is per-device — turn on / off independently for Desktop, Tablet, Mobile.

Site Name (default: on) — show the text name (or replace with

Logo when set)

Top Bar (default: off) — adds the slim announcement bar above

the main header

Border (default: on) — bottom border line under the header
Shadow (default: off) — subtle drop shadow under the header
Cart (default: on) — cart icon (hidden when cart is empty)
Account (default: off) — account / login icon
CTA Button (default: off) — adds a primary CTA button to the

header

Conditional fields

These appear when their toggle is on:

Cart URL — text input (default: `/cart`)

Where the cart icon links.

Account URL — text input (default: `/account`)

Where the account icon links.

CTA Text + CTA URL — two text inputs

Button label and link target.

Top bar text — text input (default: "Free shipping on orders over $50")

Announcement-bar message.

Site name + logo

Site name — text input

Plain text site name. Leave empty to fall back to the global site title.

Logo — image picker

Click Select Logo to pick from the media library. Once picked, a preview thumbnail + Remove (×) button replace the picker.

Menu items

A custom repeater widget (impulse-header-menu-items) where each menu entry is a Label + URL. Add, reorder by drag, edit, or remove entries inline.

Colours (3-column grid)

Each colour is a swatch:

Background — header bar fill (default: #fff)
Text — menu + site-name foreground
Hover — menu hover colour (default: #666)
Border — bottom-border colour (default: dark)

When CTA Button is on:

CTA BG — button fill
CTA Text — button label colour

When Top Bar is on:

Bar BG — top-bar background
Bar Text — top-bar text colour

Sliders (3 rows of 2)

Padding — 0–100px (default: 16). Vertical padding (header

height grows with this).

Side Padding — 0–100px (default: 40). Horizontal inset.
Menu Gap — 16–48px (default: 32). Spacing between menu items.
Font Size — 12–20px (default: 15). Menu item font size.
Icon Size — 16–28px (default: 20). Cart / account icon size.
Border Width — 0–5px (default: 1). Bottom border thickness.

Per-device overrides

Almost every setting (layout, sticky mode, toggles, sliders, colour swatches) has separate Tablet and Mobile values.

Mobile burger behaviour is automatic — when the menu is too crowded for the viewport, it collapses to a hamburger. There's no manual toggle for it.

Common patterns

Marketing site header

Layout Left · Sticky mode Sticky · Site Name on · Border on · CTA Button on · Background #fff or #0a0c0e · CTA Text "Get started" linking to /start. Padding 16 · Side Padding 40 · Menu Gap 32.

E-commerce header

Layout Left · Sticky mode Auto-hide · Cart on · Account on · CTA off · Border on · Top Bar on with shipping/promo message.

Minimal logo-only header

Layout Center · Site Name on · Border off · Cart off · Account off · CTA off · Padding 24 · Background transparent (when sitting over a hero).

blocks/footer — companion bottom chrome
blocks/section — for in-page nav rows (not full-page chrome)