Published on

How to Create a Fixed Navbar in Tailwind CSS

Authors
  • Name
    Ripal & Zalak
    Twitter

How to Create a Fixed Navbar in Tailwind CSS

A fixed navigation bar stays at the top of the page as the user scrolls. This guide will show you how to create a fixed navbar in Tailwind CSS, including responsive design and sidebar integration.

📌 Basic Fixed Navbar

To create a fixed navbar in Tailwind CSS, use fixed top-0 w-full z-50.

<header
  class="fixed top-0 z-50 flex w-full items-center justify-between bg-blue-600 px-5 py-2 shadow-md"
>
  <a href="#" class="text-2xl text-white">My App</a>
  <nav>
    <a href="#" class="rounded px-3 py-1 text-white hover:bg-gray-700">Login</a>
    <a href="#" class="rounded px-3 py-1 text-white hover:bg-gray-700">Register</a>
  </nav>
</header>

🔥 Key Classes Used:

  • fixed top-0 w-full z-50 → Fixes navbar at the top.
  • bg-blue-600 shadow-md → Sets background and shadow.
  • flex justify-between items-center → Aligns items in the navbar.

📌 Fixed Navbar with Sidebar

If your layout includes a sidebar, ensure it doesn't overlap with the navbar.

<div class="flex">
  <!-- Sidebar -->
  <aside class="fixed left-0 top-0 h-screen w-64 bg-white py-5 shadow">
    <nav class="flex flex-col text-left">
      <a href="#" class="px-4 py-2 hover:bg-gray-200">Dashboard</a>
      <a href="#" class="px-4 py-2 hover:bg-gray-200">Settings</a>
    </nav>
  </aside>

  <!-- Main Content -->
  <main class="ml-64 min-h-screen flex-1 bg-gray-100 p-5">
    <p>Your content goes here...</p>
  </main>
</div>

🔥 Key Adjustments:

  • fixed left-0 top-0 h-screen w-64 → Positions sidebar.
  • ml-64 on <main> → Prevents content from being overlapped.

📌 Sticky Navbar Alternative

If you want the navbar to become fixed only after scrolling, use sticky instead of fixed.

<header class="sticky top-0 z-50 bg-blue-600 px-5 py-2 shadow-md">
  <a href="#" class="text-2xl text-white">My App</a>
</header>

🔹 Fixed vs Sticky Navbar:

  • fixed stays at the top always.
  • sticky stays at the top only when scrolling past it.

📌 Responsive Fixed Navbar

To make the navbar responsive, use Tailwind’s md:hidden and block classes.

<header
  class="fixed top-0 z-50 flex w-full items-center justify-between bg-blue-600 px-5 py-2 shadow-md"
>
  <a href="#" class="text-2xl text-white">My App</a>

  <button class="text-white md:hidden" onclick="toggleMenu()">☰</button>

  <nav id="menu" class="hidden space-x-4 md:flex">
    <a href="#" class="rounded px-3 py-1 text-white hover:bg-gray-700">Login</a>
    <a href="#" class="rounded px-3 py-1 text-white hover:bg-gray-700">Register</a>
  </nav>
</header>

<script>
  function toggleMenu() {
    document.getElementById('menu').classList.toggle('hidden')
  }
</script>

🔥 Key Adjustments:

  • md:hidden on button → Shows menu toggle only on small screens.
  • hidden md:flex on <nav> → Hides menu by default but shows on larger screens.

❓ FAQs

1. Why does my fixed navbar overlap content?

Add pt-16 (or height of your navbar) to your main content:

<main class="pt-16">Your content</main>

2. How do I prevent the sidebar from overlapping?

Apply ml-64 to main content:

<main class="ml-64">Main content</main>

3. Is fixed or sticky better for a navbar?

  • Use fixed for always-visible navigation.
  • Use sticky for dynamic behavior when scrolling.