Blueprint 01
The header is the only component that appears on every page, so its structure is the most expensive thing on the site to change later. This blueprint covers zone layouts, height budgets, sticky behaviour, navigation depth and the four mobile patterns worth using.
Almost every production header is one of three arrangements. A two-zone header puts the logo on the left and everything else — navigation plus call to action — on the right. It is the cheapest to build, it degrades gracefully, and it reads well when you have four or fewer top-level links. A three-zone header puts the logo left, navigation centred and a compact action right. It looks deliberate and balanced, but it only works if the navigation is genuinely narrow; a centred nav that grows will push the action button off-balance and eventually off the row. A split header centres the logo and divides the navigation either side of it. It suits catalogue and editorial sites with two clearly distinct link groups, and it fails badly when one group has three items and the other has one.
The structural rule is that the header row must be immune to content growth. Give the navigation a flexible middle with min-width: 0, give the logo and the action fixed intrinsic widths, and decide in advance what happens when a link is added. If the answer is "it wraps to a second line", your header has no height budget and it will move the page down on some pages and not others.
Pick a desktop height between 56px and 64px and a mobile height between 48px and 52px, then hold it. Everything inside — the logo lockup, the link line-height, the button padding — is sized to fit that box, not the other way round. A header that is 72px tall on the homepage and 58px on an article page tells the visitor, correctly, that nobody was in charge. Use a fixed min-height on the inner flex row rather than vertical padding on the outer element, so that swapping the button for a text link does not change the height.
| Behaviour | Best for | Cost |
|---|---|---|
| Static | Marketing pages, short content, documentation with a side nav | Visitor must scroll up to navigate |
| Always sticky | Apps, long scrolling catalogues, in-page anchor navigation | Permanently consumes 8–12% of a small viewport |
| Reveal on scroll up | Long-form editorial | Requires scroll listeners; can feel twitchy on trackpads |
| Static header plus sticky sub-bar | Product pages where the action matters more than the nav | Two components to maintain instead of one |
If you choose sticky, offset your in-page anchors with scroll-margin-top equal to the header height, otherwise every jump link lands with its target heading hidden underneath the bar. This site uses a static header specifically to keep the small-viewport reading area intact.
Count your destinations before you choose a pattern. Up to six top-level links fit comfortably inline at a 60px header height with a 15px link size. Between seven and twelve, you need grouping: either drop the least-used items into a footer-only region or introduce a single dropdown. Above twelve, you are building a mega menu, and a mega menu is a layout in its own right — it needs column definitions, a heading per column, a maximum of around five links per column, and a documented keyboard path in and out.
Below 768px the inline list has to go somewhere. Four patterns are worth using, and the choice depends on how many destinations you have and whether the visitor needs to navigate while reading.
Pattern A
A panel covering the viewport, opened by a labelled button. Large touch targets, room for secondary links, and no layout shift because the header itself never changes height. This is the default recommendation for marketing sites with up to ten destinations.
Pattern B
A panel occupying roughly 80% of the width, with the page dimmed behind it. Keeps context visible, supports nested disclosure lists, and is the right call when the navigation is deep. It costs more: focus trapping, scroll locking and a dismiss region.
Pattern C
The menu pushes the page content down instead of covering it. Trivially simple and fully accessible with a disclosure button, but it does shift layout, so avoid it if visitors will open the menu mid-article.
Pattern D
Three to five persistent destinations fixed to the bottom edge, inside thumb reach. Excellent for app-like products with a small, stable set of sections. Wrong for content sites, where the destination list is long and changes over time.
For each header you ship, record three lines. Desktop: three-zone, 60px, inline nav, compact action button. Tablet: same zones, action button label shortened, link spacing reduced from 24px to 16px. Mobile: logo plus toggle only, 50px, overlay panel containing every destination in the desktop nav plus the action. If the mobile list is missing a destination that exists on desktop, that is a bug, not a simplification.
Finally, test the header at 320px with the longest brand name you might ever use. Set overflow-wrap: anywhere on the brand element so a long single-word name breaks instead of forcing a horizontal scrollbar, and confirm the toggle button keeps a touch target of at least 44 by 44 pixels.