header preset · centered
The centered editorial header, drawn for SAVE THE FROGS!
The organisation's name centered at the top, with the menu in a quiet row underneath. Lots of space, nothing follows the visitor down the page, and sub-items sit in columns under their parent.
How it behaves
- Stacked arrangement: the name above a centered row of links, on the page ground, 128px tall at wide widths.
- Not sticky. A hairline rule separates it from the page.
- Uppercase links with 0.08em tracking, weight 500, a resting underline, and a deepening to the link colour on hover.
- Sub-menus are always-open columns under their parent. The kit's titled mega panel is what the columns become when they are given headings.
Scroll the page to see how the bar behaves: it scrolls away with the page. Point at or tab into an item with a chevron to open its sub-menu.
When to use it
A nonprofit, a journal or a personal site that wants the name met first and the menu as a quiet row beneath it.
Source. site-control build #2, lib/site/menu-design.ts (centered), ported with every axis value unchanged
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
- Centered editorial
- Mobile menu
- Sheet
- 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 sheet 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 |