Welcome to this tutorial, where we'll cover the creation of a simple fixed navbar with Tailwind CSS, dive into the world of sticky headers, explore three top sticky header components, and learn how to craft a responsive sticky menu. All of this will be demonstrated with examples, leveraging the versatility of Tailwind CSS and the interactivity of Alpine.js.
Example 1
Building a Simple Sticky Header with Tailwind CSS.
<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 ui sticky header
Creating a Responsive Fixed Navbar with a Hamburger Icon.
tailwind fix nabvar
Example 2
Creating a Responsive Sticky Header and Navbar with Tailwind CSS 3 and Alpine.js
<!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 fixed header
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 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
