A sticky header sounds like a simple design choice, but it’s one of the most consequential decisions you’ll make for your site’s usability. Get it right and users navigate faster, bounce less, and convert more. Get it wrong and you eat up screen space, distract from content, and frustrate mobile visitors.
At Branded Web Design, we’ve tested sticky navigation across dozens of client projects. This guide breaks down the six rules we follow, backed by usability principles rather than trend chasing.
What Is a Sticky Header (and Why It’s Not Always a Good Idea)
A sticky header is a navigation bar that remains fixed at the top of the viewport as the user scrolls down the page. Technically, it’s built using CSS position: sticky or position: fixed, and it stays visible so users can jump between sections without scrolling back to the top.
Sticky headers are useful, but they’re not free. They occupy permanent screen real estate, which is a real cost on mobile devices where vertical space is limited. The question isn’t should I use one, it’s when does it earn its place.
When Sticky Headers Help Conversions
- Long-form pages where users need to jump between sections
- E-commerce sites with persistent cart, search, and account access
- SaaS marketing pages with a primary CTA button in the nav
- Content-heavy sites where the menu doubles as a table of contents
When Sticky Headers Hurt UX
- Short landing pages where scrolling back is trivial
- Immersive experiences (portfolios, storytelling pages, product tours)
- Reading-focused layouts like blog articles on small screens
- Any site where the header is taller than 80px on desktop or 60px on mobile
The 6 Rules for Sticky Header Design That Works
Rule 1: Keep the Height Under Control
The single most common mistake is a sticky header that’s too tall. When your header eats 15% of the viewport on every scroll, you’re forcing users to work harder to see content. The Nielsen Norman Group calls this the content-to-chrome ratio, and the rule is simple: chrome should be minimal.
Our recommended maximums:
| Device | Max Header Height | % of Viewport |
|---|---|---|
| Desktop (1440px) | 60 to 80px | Under 10% |
| Tablet | 56 to 64px | Under 8% |
| Mobile | 48 to 56px | Under 8% |
If your initial (non-sticky) header is larger for branding reasons, shrink it when the sticky state activates. This is a common and elegant pattern.
Rule 2: Shrink on Scroll, Don’t Just Snap
A hard jump between a tall hero header and a compact sticky version feels jarring. Use a smooth transition of around 200 to 300 milliseconds with an ease-out curve. This tells the user’s brain that the header is transforming, not appearing out of nowhere.
What to shrink:
- Padding (top and bottom)
- Logo size (typically to 60 to 70% of original)
- Optional taglines or secondary rows (hide them entirely)
What to keep constant: menu item font size and touch target size. Users need consistent hit zones.
Rule 3: Handle Transparency with Care
Transparent sticky headers look beautiful in mockups and cause readability problems in production. When the header scrolls over mixed content, the contrast between menu text and the background changes constantly.
Our approach:
- Use transparent headers only over hero sections with predictable background contrast
- Switch to a solid or semi-solid background (95% opacity minimum) once scrolling begins
- If you must keep transparency, add a subtle backdrop blur of 8 to 12px
- Never rely on transparency to look modern if it costs you accessibility
Test menu text contrast against every section the user will scroll past. WCAG 2.2 requires a 4.5:1 ratio for body text.
Rule 4: Design Mobile Sticky Headers Differently
Mobile is where sticky headers fail most often. Screen space is tight, thumbs cover the bottom of the screen, and virtual keyboards eat what’s left. Simply shrinking your desktop header won’t cut it.
Mobile-specific rules:
- Hide on scroll down, reveal on scroll up. This pattern (sometimes called Headroom.js behavior) gives users full screen for reading while keeping navigation one swipe away
- Keep only the essentials visible: logo, hamburger, and one primary action (search or cart)
- Ensure tap targets are at least 44 x 44px, per Apple HIG and Material Design
- Never make the sticky header 100% opaque black or white without testing on real devices in sunlight
Rule 5: Give Users a Way to Escape
A sticky header should never trap the user. If your header expands into a full-screen mega menu, provide an obvious close button and support the Escape key. If your sticky nav includes a search overlay, dismissing it must return the user exactly where they were on the page.
This sounds obvious but we routinely audit sites where clicking outside a mega menu does nothing, or where mobile menus block scroll without offering a close affordance.
Rule 6: Make the Sticky State Purposeful
Ask yourself: what will the user actually do with this header after scrolling? If the answer is nothing specific, the header shouldn’t be sticky. If the answer is book a demo, add to cart, or jump to pricing, then the sticky version should emphasize that action.
A useful pattern is the contextual sticky header: the CTA button only appears once the user has scrolled past the hero. This keeps the initial view clean and introduces the persistent action once the user is engaged.
Sticky vs Fixed vs Hidden: Choosing the Right Behavior
| Pattern | Best For | Watch Out For |
|---|---|---|
| Always sticky | E-commerce, SaaS, dashboards | Screen space cost on mobile |
| Hide on scroll down, show on scroll up | Blogs, editorial, mobile-first sites | Needs smooth animation logic |
| Reveal after threshold | Landing pages with strong hero | Trigger point must feel natural |
| Not sticky at all | Portfolios, short pages, storytelling | Users may lose orientation on long pages |
Common Sticky Header Mistakes We Still See in 2026
- Sticky headers that cover section anchors when clicking in-page links (fix with
scroll-margin-top) - Two sticky elements stacking (header plus cookie banner plus promo bar equals no content)
- Sticky headers that break when the browser address bar collapses on iOS Safari
- Overuse of drop shadows that make the header feel disconnected from the page
- Ignoring
prefers-reduced-motionfor users who disable animations
How We Approach Sticky Headers at Branded Web Design
Our default position is skeptical. We start every project by asking whether a sticky header genuinely helps the user complete their tasks. When it does, we prototype it, test it on real devices, and measure whether it improves scroll depth and conversion. When it doesn’t, we let the header scroll away like the rest of the page.
The best sticky header is the one your users don’t consciously notice. It’s just there when they need it, invisible when they don’t.
FAQ
Is a sticky header good or bad for SEO?
Sticky headers themselves have no direct SEO impact. However, if they cover a large portion of the viewport on mobile, Google may flag your page in Core Web Vitals or usability reports. Keep it under 8% of mobile viewport height.
What’s the difference between sticky and fixed headers?
Fixed headers use position: fixed and are removed from the document flow immediately. Sticky headers use position: sticky, which acts like relative positioning until a scroll threshold, then behaves like fixed. Sticky is usually the better modern choice.
Should mobile sticky headers hide on scroll?
In most cases, yes. Hiding on scroll down and revealing on scroll up gives users maximum reading space while keeping navigation accessible. This pattern tests well for editorial, blog, and long-form content.
How tall should a sticky header be?
Keep it between 60 and 80px on desktop and 48 to 56px on mobile. Anything larger competes with your content for attention and disproportionately hurts small screens.
Can I use a transparent sticky header?
Yes, but only if you guarantee readable contrast on every background the user will scroll past. A safer approach is transparent at the top of the page, solid once scrolling begins.
Do sticky headers work with anchor links?
They need help. Use the CSS scroll-margin-top property on your anchor targets, set to the height of your sticky header. This prevents section headings from hiding underneath the nav.