Sticky header design: when it helps and how to keep it out of the way
A sticky header stays at the top of the screen while the page scrolls, so the name, navigation and main action are always one tap away. It earns its place on long pages and sites where people move between sections often. It costs screen height, especially on phones, and it can hide the very things people jump to: anchor targets and focused links.
When a sticky navigation bar helps
- Long pages where people would otherwise scroll a long way back up to navigate, such as one-page sites, menus and documentation.
- Sites with a constant action, such as “Book”, “Order” or “Donate”, where keeping one button in view genuinely saves effort.
- Shops and apps where the basket, search or account is used throughout a visit.
It helps less on short pages, on reading-focused articles where the header just takes space from the text, and on landscape phones, where the screen may be only around 350px tall to begin with.
Size: how much screen it can take
| Screen | Comfortable height | What fits |
|---|---|---|
| Phone, portrait | About 56 to 64px | Logo or name, one button, a menu button |
| Phone, landscape | Consider not sticking at all | The header can scroll away normally |
| Tablet and laptop | About 64 to 80px | Name, four to six links, one button |
| Large desktop | Up to about 80px | As above; resist adding a second row |
A two-row sticky header (a promo bar above the navigation) easily takes 120px, which on a phone is a large slice of the visible page. If you need a promotion, let that bar scroll away and keep only the main row sticky. Keep tap targets in the header at least 24 by 24 CSS pixels, the WCAG 2.2 minimum; 44px is a more comfortable size for thumbs.
Sticky or fixed, and hiding on scroll
In CSS, position: sticky with top: 0 keeps the header in the page flow and pins it once it reaches the top, so nothing below needs extra padding. position: fixed takes it out of the flow, so the content needs padding to avoid starting underneath it. MDN's position reference covers the difference. Sticky is the simpler choice for most sites and needs no JavaScript.
Headers that hide when you scroll down and reappear when you scroll up save space, but they need a script and they move a lot, which can be distracting. If you use one, keep the animation short, skip it for visitors who prefer reduced motion, and make sure it never disappears while something inside it has keyboard focus.
Anchor links and keyboard focus
These are the two problems that fixed header best practices most often miss.
- Anchor targets land under the header. A link to
#pricingscrolls the heading to the very top of the viewport, where the sticky header covers it. The fix is one CSS line,scroll-padding-topon thehtmlelement set to the header's height plus a little space; see MDN's scroll-padding-top. - Focused elements hide behind it. When a keyboard user tabs backwards up a page, the browser scrolls the focused link into view, sometimes right under the header. WCAG 2.2 added Focus Not Obscured (Minimum) at level AA: a focused component must not be entirely hidden by content the author created, and sticky headers are the main example. The same
scroll-padding-topfix usually solves it. - Translucent headers over busy content. A blurred, semi-transparent header looks good but its text contrast changes as content scrolls beneath it. Keep enough opacity that links stay readable over any photo.
Designing the content of the header
Because it's always visible, a sticky header should hold only what's needed throughout the visit: the name linking home, the main sections, and at most one button. Search, a basket or an account link can join if people use them repeatedly. Social icons, phone numbers in full and secondary links belong in the footer. For menu structure, see website navigation design, and for collapsing navigation on phones, hamburger menu best practices.
Sticky headers in Anticode
Pages from Anticode's design engine have a sticky header by default, done in CSS with position: sticky, so it works on pages that carry no scripts. It's 64px tall, holds the site name, the navigation links and one action button, and has a slightly translucent background with a 1px rule beneath it. The Swiss and Brutalist systems make the background solid and the rule stronger. Interactive targets in the header are at least 44px. On a one-page site, screens 600px wide and narrower keep just the name and the main button. On a multi-page site, below about 760px the page links move to a second row that scrolls sideways, so every page stays one tap away.
Separately, the layout editor's inspector can make an element inside a section sticky, such as a heading that stays in view beside a long list. That only applies when the element sits beside something on a wide enough screen, and its distance from the top allows for the 64px header so it doesn't slide underneath.
Questions people ask
How tall should a sticky header be on mobile?
Roughly 56 to 64px. Anything taller takes a large share of a phone screen; let promotional bars scroll away.
Why do my anchor links land under the header?
The browser scrolls the target to the top edge, behind the header. Set scroll-padding-top on the html element to the header's height.
Is a sticky header bad for accessibility?
Not inherently. It must not hide focused elements, its text must keep contrast over scrolling content, and it shouldn't take too much height when zoomed.