In this tutorial we will create simple tailwind css fixed navbar, tailwind sticky header, tailwind css 3 top sticky header components, tailwind responsive nav sticky header, tailwind responsive sticky menu with alpinejs examples with Tailwind CSS.
Read also: Tailwind CSS sticky footer example
Example 1
tailwind css simple sticky header.
<div class="bg-gray-100">
<header class="sticky top-0 z-30 w-full px-2 py-4 bg-white sm:px-4 shadow-xl">
<div class="flex items-center justify-between mx-auto max-w-7xl">
<a href="#">
<span class="text-2xl font-extrabold text-blue-600">Logo</span>
</a>
<div class="flex items-center space-x-1">
<ul class="hidden space-x-2 md:inline-flex">
<li><a href="#" class="px-4 py-2 font-semibold text-gray-600 rounded">Home</a></li>
<li><a href="#" class="px-4 py-2 font-semibold text-gray-600 rounded">Blogs</a></li>
<li><a href="#" class="px-4 py-2 font-semibold text-gray-600 rounded">About Us</a></li>
<li><a href="#" class="px-4 py-2 font-semibold text-gray-600 rounded">Contact Us</a></li>
</ul>
<div class="inline-flex md:hidden">
<button class="flex-none px-2 ">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16" />
</svg>
<span class="sr-only">Open Menu</span>
</button>
<!-- put list item -->
</div>
</div>
</div>
</header>
<section class="p-4 mx-auto max-w-7xl">
<div class="mx-auto font-sans">
<h1 class="text-2xl font-bold">Tailwind CSS sticky header</h1>
<p> Header dummay data Lorem....</p>
</div>
</section>
</div>
tailwind sticky header
responsive fix nabvar with hamburger icon.
tailwind fix nabvar
Example 2
Tailwind CSS 3 with alpinejs responsive sticky header & navbar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS 3 & alpinejs 3 responsive sticky navbar</title>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
</head>
<body>
<div class="bg-gray-100">
<header class="sticky top-0 z-30 w-full px-2 py-4 bg-white shadow-xl shadow-blue-600/20 sm:px-4">
<div class="flex items-center justify-between mx-auto max-w-7xl">
<a href="#">
<span class="text-2xl font-extrabold text-blue-600">Logo</span>
</a>
<div class="flex items-center space-x-1">
<ul class="hidden space-x-2 md:inline-flex">
<li><a href="#" class="px-4 py-2 font-semibold text-gray-600 rounded">Home</a></li>
<li><a href="#" class="px-4 py-2 font-semibold text-gray-600 rounded">Blogs</a></li>
<li><a href="#" class="px-4 py-2 font-semibold text-gray-600 rounded">About Us</a></li>
<li><a href="#" class="px-4 py-2 font-semibold text-gray-600 rounded">Contact Us</a></li>
</ul>
<div class="inline-flex md:hidden" x-data="{ open: false }">
<button class="flex-none px-2 " @click="open = true">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16" />
</svg>
<span class="sr-only">Open Menu</span>
</button>
<div
class="absolute top-0 left-0 right-0 z-50 flex flex-col p-2 pb-4 m-2 space-y-3 bg-white rounded shadow"
x-show.transition="open" @click.away="open = false" x-cloak>
<button class="self-end flex-none px-2 ml-2" @click="open = false">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
<span class="sr-only">Close Menu</span>
</button>
<ul class="space-y-2">
<li><a href="#" class="px-4 py-2 font-semibold text-gray-600 rounded">Home</a></li>
<li><a href="#" class="px-4 py-2 font-semibold text-gray-600 rounded">Blogs</a></li>
<li><a href="#" class="px-4 py-2 font-semibold text-gray-600 rounded">About Us</a></li>
<li><a href="#" class="px-4 py-2 font-semibold text-gray-600 rounded">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
<section class="p-4 mx-auto max-w-7xl">
<div class="mx-auto font-sans">
<h1 class="text-2xl font-bold">Tailwind CSS sticky header</h1>
<p>Header Dummay data Lorem....</p>
</div>
</section>
</div>
</body>
</html>
Tailwind CSS 3 & alpinejs 3 responsive fixed navbar.
See Also
Tailwind CSS Free Digital Agency Landing Page
TailFood – Free Tailwind CSS Restaurant Template
Tailwind CSS Real Estate Template
Tailwind CSS Simple Responsive Landing Page Template
Tailwind CSS Simple Verification Email Template
Read Also
Tailwind CSS 3 FAQ Accordion UI Example
Tailwind CSS 3 Alert Message Example
Tailwind CSS 3 Avatars Example
Tailwind CSS 3 Breadcrumb Example
Tailwind CSS v3 Button Examples
Tailwind CSS Gradient Button Example
Tailwind CSS 3D Button Example
Tailwind CSS Loading Button Example
Tailwind CSS v3 Cards Examples
Tailwind CSS Checkbox Form Examples
Tailwind CSS Dropdowns (Menu) on Hover Example
Tailwind CSS Multiselect Dropdown Example
How to use dark mode toggle switch in Tailwind CSS 3
How to use @apply directive in Tailwind CSS
Tailwind CSS sticky header & fixed navbar example
Tailwind CSS Navbar UI Example
Tailwind CSS 3 Login Page UI Example
Tailwind CSS Login Modal Example
Tailwind CSS 3 Overlay Image Example
Tailwind CSS Thank You Page Example
Tailwind CSS Timeline UI Example
Tailwind CSS Responsive Footer Section Example
Tailwind CSS Background Image Header Example
