How to Design a Sticky Header That Improves UX (With CSS Examples)

What Is a Sticky Header and Why Does It Matter?

A sticky header is a navigation bar that stays fixed at the top of the viewport as the user scrolls down a page. Unlike a static header that disappears once you scroll past it, a sticky header remains visible at all times, giving users instant access to navigation links, search bars, calls to action, and branding.

When done right, a sticky header design reduces friction, speeds up navigation, and keeps users oriented. When done poorly, it eats up valuable screen space, causes layout jank, and frustrates mobile users.

This tutorial walks you through everything you need to build a sticky header that genuinely improves UX, complete with clean CSS and HTML you can copy into your projects right now.

Sticky Header vs. Fixed Header: What Is the Difference?

These two terms are often used interchangeably, but they behave differently in CSS.

Recommendation: For most sticky header designs in 2026, position: sticky is the better choice. It is simpler, does not require placeholder elements to prevent layout shift, and plays nicely with the document flow.

Basic Sticky Header: HTML and CSS

Let’s start with a minimal, production-ready example.

HTML

<header class="site-header">
  <div class="header-inner">
    <a href="/" class="logo">YourBrand</a>
    <nav>
      <ul class="nav-list">
        <li><a href="/features">Features</a></li>
        <li><a href="/pricing">Pricing</a></li>
        <li><a href="/docs">Docs</a></li>
        <li><a href="/contact" class="btn-cta">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

CSS

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 60px;
}

.nav-list {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

That is all it takes. The header sits in the normal flow, then sticks to the top of the viewport as soon as the user scrolls past it.

5 Best Practices for Sticky Header Design

A sticky header is only useful if it helps users. Follow these guidelines to avoid the most common mistakes.

1. Keep the Height Compact

A sticky header should never consume more than 10% of the viewport height. On a typical 900px-tall laptop screen, that means keeping it under 90px. Ideally, aim for 50 to 70px on desktop.

• Use smaller logo variants when the header is stuck.
• Collapse secondary navigation rows on scroll.
• Avoid stacking multiple bars (announcement bar + nav bar + breadcrumb) in the sticky zone.

2. Add a Subtle Shadow or Border on Scroll

When the header sticks, users need a visual cue that it has separated from the page content. A light box-shadow or border-bottom does the job without being distracting.

.site-header.scrolled {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

You can toggle the .scrolled class with a small JavaScript snippet:

const header = document.querySelector('.site-header');
window.addEventListener('scroll', () => {
  header.classList.toggle('scrolled', window.scrollY > 10);
});

3. Consider a Shrinking Header Effect

A shrinking header starts at full height and then transitions to a more compact version once the user scrolls. This gives you room for a large logo and tagline at the top of the page without wasting space as the user moves deeper into content.

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  transition: height 0.3s ease, padding 0.3s ease;
  height: 80px;
}

.site-header.scrolled {
  height: 56px;
}

.site-header .logo img {
  transition: height 0.3s ease;
  height: 40px;
}

.site-header.scrolled .logo img {
  height: 28px;
}

4. Use a Semi-Transparent or Blurred Background

A fully opaque white header can feel heavy. A modern alternative is a frosted-glass look using backdrop-filter.

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

This approach lets content peek through slightly, making the header feel lighter. backdrop-filter has excellent browser support in 2026, so you can use it confidently in production.

5. Provide a Hide-on-Scroll-Down, Show-on-Scroll-Up Option

This is arguably the best pattern for mobile sticky header design. The header hides when the user scrolls down (they are consuming content) and reappears when they scroll up (they want to navigate).

let lastScroll = 0;
const header = document.querySelector('.site-header');

window.addEventListener('scroll', () => {
  const currentScroll = window.scrollY;

  if (currentScroll > lastScroll && currentScroll > 80) {
    header.classList.add('header-hidden');
  } else {
    header.classList.remove('header-hidden');
  }

  lastScroll = currentScroll;
});

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: transform 0.3s ease;
}

.site-header.header-hidden {
  transform: translateY(-100%);
}

The transform approach is GPU-accelerated and avoids triggering layout recalculations, which keeps scrolling smooth.

Mobile Considerations for Sticky Headers

Mobile is where sticky headers cause the most problems. Screen real estate is limited, and a poorly sized header can block a significant portion of visible content.

1. Reduce the header height to 48-56px maximum on screens under 768px. Every pixel counts on mobile.
2. Use the hide-on-scroll-down pattern described above. It gives users 100% of the screen for reading while keeping navigation one swipe away.
3. Collapse navigation into a hamburger menu. Do not try to fit five or six links horizontally in a sticky mobile header.
4. Test on real devices. The browser chrome (address bar, toolbar) on iOS Safari and Android Chrome interacts with sticky positioning in ways that emulators do not always replicate accurately.
5. Avoid hover-dependent dropdowns in the sticky header on touch devices. Use tap-to-open menus instead.

Accessibility Checklist for Sticky Headers

Sticky headers can create accessibility barriers if you are not careful. Use this checklist:

• Keyboard navigation: Ensure all links and buttons in the header are reachable with the Tab key and activatable with Enter or Space.
• Focus management: If the header hides on scroll down, make sure it becomes visible again when a user tabs into it.
• Reduced motion: Respect the prefers-reduced-motion media query by disabling slide and shrink transitions for users who prefer minimal motion.

  @media (prefers-reduced-motion: reduce) {
    .site-header {
      transition: none;
    }
  }
  

• Sufficient contrast: If you use a semi-transparent background, ensure that the text color against the blurred background still meets WCAG AA contrast ratios (4.5:1 for normal text).
• Skip navigation link: Include a “Skip to main content” link as the first focusable element inside the header so screen reader and keyboard users can bypass navigation.

Performance Tips

A sticky header should never make your site feel sluggish. Keep these performance guidelines in mind:

• Avoid layout thrashing in scroll listeners. Do not read layout properties (like offsetHeight) and then immediately write style changes in the same callback. Batch your reads and writes, or use requestAnimationFrame.
• Prefer CSS over JavaScript whenever possible. Pure position: sticky requires zero JavaScript. Only add JS when you need dynamic behaviors like hide-on-scroll or class toggling.
• Use will-change: transform sparingly. Apply it to the header element if you animate its transform, but remove it from elements that are not actively animating.
• Debounce or throttle scroll events if you are performing heavy logic inside them. For simple class toggling, a passive scroll listener without debouncing is usually fine.
• Test with Lighthouse and Core Web Vitals. Watch for Cumulative Layout Shift (CLS) regressions. A header that shifts content on load or on scroll state change will hurt your CLS score.

Complete Example: Responsive Sticky Header With Scroll Effects

Here is a full, copy-paste-ready example that combines the best practices above into a single component.

HTML

<header class="site-header" id="siteHeader">
  <div class="header-inner">
    <a href="/" class="logo">YourBrand</a>
    <nav aria-label="Main navigation">
      <button class="menu-toggle" aria-expanded="false" aria-controls="mainMenu">
        <span class="sr-only">Menu</span>
        <span class="hamburger"></span>
      </button>
      <ul class="nav-list" id="mainMenu">
        <li><a href="/features">Features</a></li>
        <li><a href="/pricing">Pricing</a></li>
        <li><a href="/docs">Docs</a></li>
        <li><a href="/contact" class="btn-cta">Get Started</a></li>
      </ul>
    </nav>
  </div>
</header>

CSS

/* --- Base Header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: transform 0.3s ease,
              box-shadow 0.3s ease,
              height 0.3s ease;
  height: 70px;
}

.site-header.scrolled {
  height: 56px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border-bottom-color: #e5e7eb;
}

.site-header.header-hidden {
  transform: translateY(-100%);
}

/* --- Inner Layout --- */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* --- Nav --- */
.nav-list {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.nav-list a {
  text-decoration: none;
  color: #1f2937;
  font-weight: 500;
}

.btn-cta {
  background: #2563eb;
  color: #fff !important;
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
}

/* --- Hamburger (hidden on desktop) --- */
.menu-toggle {
  display: none;
}

/* --- Mobile --- */
@media (max-width: 768px) {
  .site-header {
    height: 56px;
  }

  .site-header.scrolled {
    height: 50px;
  }

  .menu-toggle {
    display: flex;
    background: none;
    border: none;
    cursor: pointer;
  }

  .nav-list {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  .nav-list.open {
    display: flex;
  }
}

/* --- Accessibility --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}

JavaScript

const header = document.getElementById('siteHeader');
const toggle = document.querySelector('.menu-toggle');
const navList = document.querySelector('.nav-list');
let lastScroll = 0;

// Scroll behavior
window.addEventListener('scroll', () => {
  const current = window.scrollY;

  // Add shadow and shrink
  header.classList.toggle('scrolled', current > 10);

  // Hide on scroll down, show on scroll up
  if (current > lastScroll && current > 80) {
    header.classList.add('header-hidden');
  } else {
    header.classList.remove('header-hidden');
  }

  lastScroll = current;
}, { passive: true });

// Mobile menu toggle
toggle.addEventListener('click', () => {
  const expanded = toggle.getAttribute('aria-expanded') === 'true';
  toggle.setAttribute('aria-expanded', !expanded);
  navList.classList.toggle('open');
});

When Should You NOT Use a Sticky Header?

A sticky header is not always the right choice. Consider skipping it in these scenarios:

• Single-screen landing pages that require no scrolling.
• Immersive reading experiences (long-form articles, stories) where you want to maximize content space and minimize distractions.
• Pages where the header is very tall (multiple rows of navigation, large banners). Sticking all of that would be counterproductive.
• Kiosk or embedded applications where users navigate via in-page controls rather than a traditional header.

Quick Reference: Sticky Header Design Cheat Sheet

Frequently Asked Questions

Is a sticky header a good idea?

Yes, in most cases. Research from the Nielsen Norman Group shows that sticky headers improve navigation speed and user orientation, especially on content-heavy pages. The key is to keep the header compact so it does not steal too much screen space, particularly on mobile devices.

What is the difference between a sticky header and a fixed header?

A sticky header (position: sticky) behaves like a normal element until the user scrolls past it, at which point it sticks in place. A fixed header (position: fixed) is always locked to the viewport and removed from the document flow, which means you typically need a spacer element to prevent content from jumping. For headers, sticky is almost always the cleaner option.

Are sticky headers accessible?

They can be, but you need to take deliberate steps. Include a skip-navigation link, ensure full keyboard operability, respect the prefers-reduced-motion setting, and make sure color contrast is sufficient if you use a transparent or blurred background.

Do sticky headers hurt performance?

A simple CSS position: sticky header has virtually zero performance cost. Problems arise when you attach expensive JavaScript to the scroll event or trigger layout recalculations. Use passive event listeners, stick to transform and opacity for animations, and test with Lighthouse to keep your Core Web Vitals healthy.

How do I make a sticky header work on mobile Safari?

Mobile Safari supports position: sticky well. The main gotcha is the dynamic browser toolbar that resizes the viewport as you scroll. Use dvh (dynamic viewport height) units if your layout depends on viewport height, and always test on a real iPhone to verify the behavior.

Should I use JavaScript or pure CSS for a sticky header?

Use pure CSS (position: sticky) for the sticking behavior itself. Add a small amount of JavaScript only if you need dynamic effects like shrinking, shadow toggling, or hide-on-scroll-down. This keeps things fast and maintainable.