DEV Community

Cover image for Day 10: How to Create a Sticky Header Using Tailwind CSS
Ruqaiya Beguwala
Ruqaiya Beguwala

Posted on • Originally published at Medium

Day 10: How to Create a Sticky Header Using Tailwind CSS

#webdev #tailwindcss #ui

Sticky headers are a common UI pattern in modern web design. They help maintain context as users scroll, especially for navigation, filters, or key CTAs. With Tailwind CSS, you can create a fully responsive, scroll-sticky header using just a few utility classes—without writing any custom CSS.

Let’s explore how to build a sticky header that stays visible at the top of the viewport while scrolling, and follow up with some advanced techniques for improving its behavior.

Basic Sticky Header Setup

Tailwind provides native support for CSS position utilities like sticky, which we’ll use to pin the header to the top of the page.

Here’s the basic structure:

<header class="sticky top-0 z-50 bg-white shadow"> <div class="max-w-7xl mx-auto px-4 py-3"> <h1 class="text-lg font-semibold">My Sticky Header</h1> </div> </header>
Enter fullscreen mode Exit fullscreen mode
  • sticky: Sets the element to position: sticky
  • top-0: Anchors it to the top of the viewport
  • z-50: Ensures the header stacks above other content
  • bg-white: Sets background to avoid transparency when overlapping content
  • shadow: Adds subtle depth to differentiate from body content

Below the header, you can place your page content normally. The sticky behavior will kick in once the header scrolls out of the normal flow.

Add Scroll Padding to Fix Overlapping Anchors

If your page uses anchor links (e.g., #section1), you might notice that sticky headers can cover up linked sections. Use Tailwind’s scroll padding to resolve this:

<body class="scroll-pt-20">
Enter fullscreen mode Exit fullscreen mode

This adds top padding to the scroll target, making sure your anchor destinations aren’t hidden under the sticky header.

Sticky Headers in Responsive Layouts

To make sure your sticky header works across screen sizes, wrap your content with responsive padding and containers:

<header class="sticky top-0 z-40 bg-white shadow-sm"> <div class="max-w-screen-lg mx-auto px-4 sm:px-6 lg:px-8"> <nav class="flex items-center justify-between py-3"> <span class="text-xl font-bold">Brand</span> <ul class="flex space-x-4 text-sm"> <li><a href="#" class="hover:underline">Home</a></li> <li><a href="#" class="hover:underline">About</a></li> <li><a href="#" class="hover:underline">Contact</a></li> </ul> </nav> </div> </header>
Enter fullscreen mode Exit fullscreen mode

This setup ensures your sticky header remains well-spaced and consistent, no matter the screen width.

Advanced Tips & Tricks for Sticky Headers

Here are a few techniques to make your sticky headers more dynamic, responsive, and production-ready:

1. Add a Shadow Only After Scrolling

Use a utility like sticky top-0 combined with JavaScript to toggle a shadow class only when the page scrolls. This creates a smooth transition from flat to elevated.

window.addEventListener('scroll', () => { const header = document.querySelector('header'); if (window.scrollY > 10) { header.classList.add('shadow-md'); } else { header.classList.remove('shadow-md'); } });
Enter fullscreen mode Exit fullscreen mode

2. Use backdrop-blur for a Frosted Glass Look 

<header class="sticky top-0 z-50 backdrop-blur bg-white/80">
Enter fullscreen mode Exit fullscreen mode

This adds a modern translucent effect—ideal for aesthetic dashboards or landing pages.

3. Combine with transition for Smooth Effects 

<header class="sticky top-0 z-50 bg-white transition-shadow duration-300">
Enter fullscreen mode Exit fullscreen mode

Add transition utilities to make shadow or background changes smooth when scrolling or toggling classes.

4. Use dark: Variants for Theming 

<header class="sticky top-0 bg-white dark:bg-gray-900 dark:text-white">
Enter fullscreen mode Exit fullscreen mode

Support both light and dark mode with simple Tailwind variants—perfect for modern apps with theme toggling.

5. Pin Only on Large Screens Using Responsive Variants 

<header class="lg:sticky lg:top-0 bg-white shadow">
Enter fullscreen mode Exit fullscreen mode

If you want the header to be sticky only on desktop, use lg: prefix to limit behavior to larger breakpoints.

6. Combine Sticky Header with Hidden on Scroll

For advanced layouts, combine Tailwind with JavaScript to hide the header while scrolling down and reveal it on scroll up. This improves focus for long content pages and enhances UX.

Conclusion

Sticky headers are a small UI detail that can significantly improve navigation and usability, especially on long-scroll pages. With Tailwind CSS, creating them is not only easy but also flexible and highly customizable. You can build lightweight headers using only utility classes—or take things further with shadows, dark mode support, and scroll-based effects.

As you get comfortable with Tailwind’s layout utilities, you’ll find patterns like sticky, z-index, and scroll padding becoming second nature in your frontend toolkit.

Tomorrow, we’ll dive into animated spinners using Tailwind’s built-in animate-spin class—no libraries or external assets needed.

Top comments (0)