header preset · classicbar
The classic bar header, drawn for SAVE THE FROGS!
The organisation's name on the left, links on the right, in a dark bar that stays at the top as visitors scroll. Sub-menus drop down when a visitor points at them or tabs into them.
How it behaves
- Split arrangement: brand left, links right, one row from the breakpoint up.
- Sticky. The deep ground is what lets it stick without the page appearing to slide under a translucent smear.
- No rule under the bar: a deep bar on a light page is the separation, and a border on top of it reads as a seam.
- Links rest without an underline; the bar itself carries the affordance, and an underline arrives on hover or focus.
- Sub-menus are single-column drop-downs on hover and :focus-within. One item overrides that to a titled mega panel.
Scroll the page to see how the bar behaves: it stays at the top. Point at or tab into an item with a chevron to open its sub-menu.
When to use it
The workhorse. Most business and organisation sites, and any menu long enough that vertical space must stay with the content.
Source. site-control build #1, lib/site/menu-design.ts (classicbar), 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
- Classic bar
- 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 |
The rest of the kit
The same preset in the other brand
Other header demos for SAVE THE FROGS!
- The centered editorial header, drawn for SAVE THE FROGS!
- The overlay header, drawn for SAVE THE FROGS!