header preset · overlay
The overlay header, drawn for SAVE THE FROGS!
A transparent bar laid over the hero photograph, with uppercase bold links, one to three square action blocks in the brand colours, and the social icons at the far right. It scrolls away with the hero.
How it behaves
- Absolute, not fixed: the source's fixed transparent bar stays legible only while its dark hero is behind it, so ours scrolls away with the hero. A bar that goes solid on scroll needs script, which the kit rules out.
- The ink is derived from the hero's scrim, never assumed white: the scrim is sampled at 21 points and the ink must pass over a pure-white and a pure-black photograph at every one.
- Uppercase 18px links at weight 700, no tracking, underline on hover.
- The CTA group: one to three flush square blocks, each in an identity colour with its own derived ink.
- Sub-menus open as a titled mega panel on hover and :focus-within.
Scroll the page to see how the bar behaves: it scrolls away with the photograph. Point at or tab into an item with a chevron to open its sub-menu.
When to use it
A page whose first screen is a photograph. The builder refuses this preset when the first section has no image.
Source. greenmusic.org.au, measured off the live DOM on 2026-09-23 at 1440 and 390
What this page is showing
Every page in the kit carries all three components, so the one under review is seen in a real page rather than in a card. This page's three presets, and the brand they are drawn in:
- Header
- Overlay
- Mobile menu
- Drawer
- Footer
- Minimal footer
- Brand
- SAVE THE FROGS! — primary
#72AF43, accent#F5821F, Nunito Sans - Breakpoint
- 1010px: the bar's links show from there up; below it the drawer menu takes over
- Client script
- none — every disclosure is a details element
Measured from
The header presets were modelled on pages measured off the live DOM at 1440×900 and 390×844 on 2026-09-23. The structure was taken; the sizes were not, because three of the four sources set type below this organisation's floor.
greenmusic.org.au
Taken: the overlay bar over the hero photograph and the group of adjacent square action blocks in different brand colours. Not copied: position: fixed on a transparent bar (legible only over their dark hero), and the drop-down's script.
| bar | transparent over the hero photo, fixed, 100px tall at 1440, 80px at 390 |
|---|---|
| logo | 130×60 at x=48 desktop, x=16 phone |
| links | 18px / 700 / uppercase, white, no tracking, five text links |
| ctas | three square colour blocks in a row, radius 0, flush |
| socials | three icon links at the far right |
| dropdowns | Programs, Resources and About are button aria-expanded parents |
The rest of the kit
The same preset in the other brand
Other header demos for SAVE THE FROGS!
- The classic bar header, drawn for SAVE THE FROGS!
- The centered editorial header, drawn for SAVE THE FROGS!