navigationbeginner

Sticky Header

Navigation header that sticks to top while scrolling with blur effect.

Preview

Tailwind Classes

sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200

CSS Code

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #e5e7eb;
}

HTML Example

<header class="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200 px-4 py-3">
  <nav class="flex items-center justify-between">
    <span class="font-bold">Logo</span>
    <div class="space-x-4">
      <a href="#" class="text-gray-600 hover:text-gray-900">Home</a>
      <a href="#" class="text-gray-600 hover:text-gray-900">About</a>
    </div>
  </nav>
</header>

Use Cases

Website headersNavigation barsApp headersToolbars

Browser Support

All modern browsers

#sticky#header#navigation#blur