Transparent, Hide-on-Scroll Header

Scroll down then back up to see the header behaviour.

Header behaviour showcase

This page overrides header.appearance, header.scrollBehaviour, and header.navPosition for this page only.

What's configured here (see config/page_level/showcase-header.config.php):

  • header.appearance = 'transparent' — no background until you scroll, then fades to a solid dark bar.
  • header.scrollBehaviour = 'hide-on-scroll' — the header hides on scroll-down and re-appears on scroll-up.
  • header.navPosition = 'left' — the desktop nav sits to the left of the brand (mirrored from the site default).
  • layout.showHero = true with hero.mediaWidth = 'full' — a full-bleed hero so the transparent header has something to sit over.

Still to review: the transparent-to-solid transition timing on slower scroll, and whether hide-on-scroll feels right when combined with a sticky mobile nav toggle.