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.

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".