Global header

Responsive breakpoints

The global header shown at the five grid breakpoints, each with a developer spec below it.

  • Width: the header spans the full viewport inside the page margin. It is not capped at 1280px.
  • Nav: links fold into a “More” menu when they don’t fit. At narrow widths the whole nav moves into a hamburger menu.
Implementation notes
Component. Use the design system SiteHeader. Don’t rebuild it. Margins and gutters come from --space-page-margin and --space-page-gutter.
Two layouts. The full header shows the nav row. The compact header replaces the nav with a hamburger menu.
Switch point. The header changes layout when its own inner width drops below 1024px. With 48px margins that is a viewport of about 1120px, so the 1024px frame already shows the hamburger.
Height. 72px for the full header, 56px for the compact header. Content is vertically centred; there is no top or bottom padding.
Utility icons. Each is a 44 × 44 tap area, 4px apart. Login drops its label below 1024px, call and region icons hide below 768px, and the account label hides below 480px.
“Try for free” button. 44px tall on desktop. In the compact header it is 28px tall with 12px side padding and 14px text.
Hamburger and logo. In the compact header, the logo sits 8px to its right.
{{ f.id }} {{ f.name }} · {{ f.width }}px
Dev spec

{{ f.behavior }}

{{ r.k }}
{{ r.v }}