Sticky and Fixed Navigation
Make a navbar stick to the top of the viewport with sticky top-0 or fixed top-0, and add a backdrop blur for a modern frosted glass look.
Sticky and Fixed Navigation is a free Tailwind CSS Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Tailwind CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Sticky vs Fixed Positioning
Two Tailwind utilities make a navbar persist as users scroll: sticky and fixed. Understanding the difference is key to choosing the right one for your layout.
sticky top-0 keeps the element in the normal document flow until the user scrolls it to the top, then locks it there. fixed top-0 removes the element from document flow entirely and pins it to the viewport, which means the page content must be offset to avoid being hidden behind the navbar.
<!-- Sticky: stays in flow, locks at top when scrolled to -->
<nav class="sticky top-0 bg-white shadow-sm z-50">
...
</nav>
<!-- Fixed: always pinned to viewport, content must have top padding -->
<nav class="fixed top-0 inset-x-0 bg-white shadow-sm z-50">
...
</nav>
<main class="pt-16"><!-- offset for fixed navbar height -->
...
</main>The z-index Layer
Both sticky and fixed navbars need a high z-index to float above page content like images, cards, and dropdowns. Without it, the navbar can appear beneath absolutely positioned elements.
Tailwind provides z-index utilities from z-0 to z-50 plus z-auto. A navbar almost always uses z-50 to ensure it sits above all standard page content. If you use Headless UI dialogs (z-40) or modals, the navbar's z-index should still be below those to avoid covering overlay UIs.
<nav class="sticky top-0 bg-white shadow-md z-50">
<!-- z-50 keeps the nav above cards, images, and tooltips -->
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
<span class="font-bold text-blue-600">Brand</span>
<div class="flex gap-6">
<a href="/" class="text-gray-600 hover:text-gray-900">Home</a>
<a href="/about" class="text-gray-600 hover:text-gray-900">About</a>
</div>
</div>
</nav>Background Blur Frosted Glass Effect
A modern navbar trend is the frosted glass effect: a semi-transparent background that blurs the content scrolling behind it. Use bg-white/80 backdrop-blur-md to achieve this — the slash syntax sets 80% opacity and backdrop-blur-md applies the blur filter to content behind the element.
This creates a polished, contemporary look seen in macOS-style apps and many SaaS dashboards. Pair it with border-b border-gray-200/50 for a subtle bottom border.
<nav class="sticky top-0 bg-white/80 backdrop-blur-md border-b border-gray-200/50 z-50">
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
<span class="font-bold text-blue-600">Brand</span>
<div class="flex items-center gap-6">
<a href="/" class="text-sm font-medium text-gray-700 hover:text-gray-900">Home</a>
<a href="/docs" class="text-sm font-medium text-gray-700 hover:text-gray-900">Docs</a>
<a href="/signup" class="px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg">Sign Up</a>
</div>
</div>
</nav>Scroll-Triggered Shadow With JavaScript
A common enhancement is to add or remove a shadow based on scroll position. The navbar starts flat when at the top and gains a shadow after the user scrolls down. This is done with a JavaScript scroll listener that toggles a class.
The class scrolled adds shadow-md using JavaScript, keeping the visual transition smooth with transition-shadow duration-200 on the navbar element itself.
<nav id="navbar" class="sticky top-0 bg-white z-50 transition-shadow duration-200">
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
<span class="font-bold text-blue-600">Brand</span>
</div>
</nav>
<script>
const nav = document.getElementById('navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 10) {
nav.classList.add('shadow-md');
} else {
nav.classList.remove('shadow-md');
}
});
</script>Fixed Bottom Navigation Bar
On mobile apps and PWAs, a bottom navigation bar is more thumb-friendly than a top bar. Use fixed bottom-0 inset-x-0 to pin the bar to the bottom of the viewport, and add pb-safe (or equivalent) for iPhone notch/home-bar safe areas.
Each nav item is an anchor containing an icon above a label text, centered with flex flex-col items-center gap-1. The active item uses your brand color while inactive items use a muted gray.
<nav class="fixed bottom-0 inset-x-0 bg-white border-t border-gray-200 z-50">
<div class="flex justify-around items-center h-16 px-4">
<a href="/" class="flex flex-col items-center gap-1 text-blue-600">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h4v-4h2v4h4a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/></svg>
<span class="text-xs font-medium">Home</span>
</a>
<a href="/explore" class="flex flex-col items-center gap-1 text-gray-500">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0"/></svg>
<span class="text-xs font-medium">Explore</span>
</a>
<a href="/profile" class="flex flex-col items-center gap-1 text-gray-500">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
<span class="text-xs font-medium">Profile</span>
</a>
</div>
</nav>Sticky Navbar Offset and Layout
When using sticky, the element stays in the document flow, so page content naturally starts below it. However, if the sticky navbar is inside a constrained container, it can only stick within that container's bounds.
For a full-width sticky navbar that spans the entire screen, place the <nav> as a direct child of the <body> or the outermost layout wrapper — not inside a container div with max-w-*.
<!-- Correct: nav is outside the content wrapper -->
<body class="min-h-screen bg-gray-50">
<nav class="sticky top-0 bg-white shadow-sm z-50">
<div class="max-w-7xl mx-auto px-6 py-4">...</div>
</nav>
<main class="max-w-7xl mx-auto px-6 py-8">
<!-- Page content -->
</main>
</body>Transitioning Navbar Height on Scroll
A sophisticated UX pattern is a navbar that shrinks on scroll — taller at the top of the page and more compact after the user scrolls down. This is achieved by toggling a class that changes the padding values.
The transition-all duration-300 on the nav element ensures the height change animates smoothly, creating a polished professional feel.
<nav id="nav" class="sticky top-0 bg-white shadow-sm z-50 transition-all duration-300">
<div class="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between" id="nav-inner">
<span class="text-xl font-bold text-blue-600">Brand</span>
</div>
</nav>
<script>
const navInner = document.getElementById('nav-inner');
window.addEventListener('scroll', () => {
if (window.scrollY > 60) {
navInner.classList.remove('py-5');
navInner.classList.add('py-2');
} else {
navInner.classList.remove('py-2');
navInner.classList.add('py-5');
}
});
</script>Sticky Sidebar Navigation
In dashboard layouts, the sidebar is often sticky rather than the top navbar. Use sticky top-0 h-screen overflow-y-auto on the sidebar to make it fill the viewport height and scroll independently when its content is taller than the screen.
Pair this with flex on the page wrapper and flex-1 on the main content area to create a proper two-column layout where only the main area scrolls.
<div class="flex min-h-screen">
<!-- Sticky sidebar -->
<aside class="w-64 flex-shrink-0 sticky top-0 h-screen overflow-y-auto bg-gray-900 text-white">
<div class="p-6">
<p class="text-lg font-bold">Dashboard</p>
<nav class="mt-8 space-y-1">
<a href="/" class="block px-3 py-2 rounded-lg bg-gray-800 text-white text-sm">Overview</a>
<a href="/users" class="block px-3 py-2 rounded-lg text-gray-300 hover:bg-gray-800 text-sm">Users</a>
<a href="/settings" class="block px-3 py-2 rounded-lg text-gray-300 hover:bg-gray-800 text-sm">Settings</a>
</nav>
</div>
</aside>
<!-- Scrollable main -->
<main class="flex-1 overflow-y-auto p-8 bg-gray-50">
<!-- Page content -->
</main>
</div>Hiding Navbar on Scroll Down
A mobile-friendly pattern hides the navbar when scrolling down (to give more screen space) and reveals it when scrolling back up. This uses JavaScript to detect scroll direction and toggle a -translate-y-full class.
Combine with transition-transform duration-300 on the navbar for a smooth slide-up and slide-down animation. This technique is common in mobile-first apps and news sites.
<nav id="auto-nav" class="fixed top-0 inset-x-0 bg-white shadow-sm z-50 transition-transform duration-300">
<div class="max-w-7xl mx-auto px-6 py-4">
<span class="font-bold text-blue-600">Brand</span>
</div>
</nav>
<script>
let lastY = 0;
const nav = document.getElementById('auto-nav');
window.addEventListener('scroll', () => {
const currentY = window.scrollY;
if (currentY > lastY && currentY > 64) {
nav.classList.add('-translate-y-full');
} else {
nav.classList.remove('-translate-y-full');
}
lastY = currentY;
});
</script>Announcement Bar Above Navbar
Many marketing sites add an announcement bar above the navbar for promotions, alerts, or product updates. This bar is also sticky — but it should scroll away once the user scrolls a bit, so use a sticky top-0 on both elements: the bar and the nav will stack naturally, and both will stick to their respective positions in the stack.
Use flex items-center justify-center gap-4 px-6 py-2 bg-blue-600 text-white text-sm for a clean, full-width announcement band.
<!-- Announcement bar -->
<div class="sticky top-0 z-50 flex items-center justify-center gap-4 px-6 py-2 bg-blue-600 text-white text-sm">
<span>Summer sale! Use code <strong>SUMMER25</strong> for 25% off.</span>
<button class="text-white/70 hover:text-white" aria-label="Dismiss">×</button>
</div>
<!-- Main navbar -->
<nav class="sticky top-8 bg-white shadow-sm z-40">
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
<span class="font-bold text-blue-600">Brand</span>
</div>
</nav>Transparent Navbar Over Hero
Landing pages often use a transparent navbar that floats over a full-screen hero image. Use absolute top-0 inset-x-0 to position the nav over the hero without affecting layout, and set text to white: text-white for all links.
This technique requires the hero section to have relative positioning and enough height to accommodate the navbar's visual overlap. As users scroll, a JavaScript listener can switch the navbar to a solid background.
<div class="relative min-h-screen">
<!-- Hero background -->
<div class="absolute inset-0 bg-gradient-to-br from-blue-900 to-purple-900"></div>
<!-- Transparent navbar -->
<nav class="absolute top-0 inset-x-0 z-50">
<div class="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between">
<span class="text-xl font-bold text-white">Brand</span>
<div class="flex items-center gap-6">
<a href="/" class="text-sm font-medium text-white/80 hover:text-white">Home</a>
<a href="/about" class="text-sm font-medium text-white/80 hover:text-white">About</a>
<a href="/signup" class="px-4 py-2 text-sm font-semibold bg-white text-blue-900 rounded-lg">
Get Started
</a>
</div>
</div>
</nav>
<!-- Hero content -->
<div class="relative flex items-center justify-center h-screen text-center">
<h1 class="text-5xl font-bold text-white">Welcome</h1>
</div>
</div>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: sticky vs fixed positioning and their different layout implications for page content; the frosted glass navbar with bg-white/80 backdrop-blur-md; and scroll-triggered enhancements like dynamic shadow addition and navbar shrinking via JavaScript class toggling. Next up we build a vertical sidebar layout.
Frequently asked questions
Is the “Sticky and Fixed Navigation” lesson free?
Yes — the full text of “Sticky and Fixed Navigation” is free to read here on the web, and the Tailwind CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Tailwind CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Sticky and Fixed Navigation”?
Make a navbar stick to the top of the viewport with sticky top-0 or fixed top-0, and add a backdrop blur for a modern frosted glass look. You practise Tailwind CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Tailwind CSS Academy?
No prior experience is required. Tailwind CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Sticky and Fixed Navigation” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Tailwind CSS Academy lesson?
Yes. Every Tailwind CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Building a Responsive Navbar
- Sticky and Fixed Navigation
- Vertical Sidebar Layout
- Collapsible Mobile Sidebar