Tailwind CSS Academy · Lesson

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 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>

All lessons in this course

← Back to Tailwind CSS Academy