Header

Three flex children on one row: a left nav rail, the centred logo, and a right rail holding the action icons. On mobile the rails collapse and a hamburger opens a full-height drawer.

Structure

┌──────────────────────────────────────────────────────┐
│  [left nav]          LOGO          [nav]  [icons]    │
└──────────────────────────────────────────────────────┘

The logo is a real flex child, not absolutely positioned — the two rails flex around it, so it stays optically centred at any width without hand-tuned offsets.

Layout options were removed

The header previously offered logo-left and logo-right variants for templatising across sites. That’s gone — this build only needs the centred layout, and the branching it required made the section hard to work in.

Settings

Setting	What it does
Logo	Falls back to the MigreLief wordmark when empty.
Menu	The main navigation link list.
Mobile utility menu	Extra links shown at the bottom of the mobile drawer.
Store locator URL / text	Optional store-locator link.

Content areas

Navigation is composed from blocks in three areas:

Header content (left) — the main nav. Renders in the left rail on desktop and at the top of the mobile drawer. Holds meganav and plain nav-link blocks.

Header content (right) — extra nav on the right rail, desktop only.

Header actions — search, account and cart icons. Always on the right, at every breakpoint.

Why content areas are captured

A static block id can only render once per section, but the nav has to appear in both the desktop bar and the mobile drawer. Each area is captured into a variable and echoed in both places. If you add a new area, follow that pattern — rendering the same id twice silently drops the second one.

Mobile drawer

Opens below the header bar, full remaining viewport height. Traps focus while open, closes on Escape, and closes automatically when the viewport crosses to desktop width.

The hamburger animates into a cross — three rules, the outer two rotating about the centre, the middle fading out.

Over a dark hero

The header sits on top of the page rather than pushing it down, so when the first section is an edge-to-edge hero the image runs up behind the navigation. In that case the header turns white — nav links, icons and the wordmark — so it stays readable against the image.

This is automatic, but it is driven by the hero, not the header: it happens when the first section on the page has its Text theme set to Dark. The Hero section does that on its Banner layout always, and on a Full screen hero whenever you choose Dark yourself.

The moment the header becomes its own surface — a meganav opens, or the mobile drawer opens — the bar turns solid white and the links go back to dark green. There is nothing to configure; it simply stops borrowing the hero’s treatment once it is no longer sitting over the image.

An uploaded logo image will not turn white

With no logo set, the theme renders the wordmark as an SVG, which inverts along with everything else. A logo uploaded in the header settings is a fixed image file and cannot invert — over a dark hero it will stay whatever colour it was saved as. A light variant would need to be supplied separately.

Tips

• Keep top-level nav items short. The rails flex around the logo; long labels squeeze it at tablet widths.
• Test the drawer at 375px after changing nav structure.
• The drawer is a dark surface — components inside it invert automatically via data-theme="dark".