Responsive Navigation and Header Patterns

Building a responsive navigation bar is one of the first real-world challenges when learning Tailwind. The pattern involves hiding the full desktop nav links on mobile, showing a hamburger button instead, and toggling a mobile menu. With Tailwind you handle the visual states through class manipulation from JavaScript, Alpine.js, or your front-end framework — Tailwind itself just provides the styling utilities. The container utility combined with mx-auto and responsive padding utilities creates the standard centred content wrapper. You can customise the container behaviour in tailwind.config.js to automatically center and add padding, avoiding repetition across every page. The max-w-* utilities (max-w-sm through max-w-screen-2xl) complement containers for constraining inner content blocks. Sticky and fixed headers use different stacking strategies. A sticky header with sticky top-0 z-50 stays in normal document flow but pins when the user scrolls past it. A fixed header with fixed top-0 inset-x-0 z-50 lifts out of document flow entirely, requiring a padding-top or margin-top on the page body equal to the header height so content is not obscured. Using h-16 on the header and pt-16 on the body is a common pattern.

Example

<!-- Responsive navbar (Alpine.js for toggle) -->
<nav class="bg-white shadow-sm sticky top-0 z-50" x-data="{ open: false }">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">

      <!-- Logo -->
      <a href="/" class="text-xl font-bold text-blue-600">Brand</a>

      <!-- Desktop links (hidden on mobile) -->
      <div class="hidden md:flex items-center gap-8 text-sm font-medium text-gray-600">
        <a href="#" class="hover:text-blue-600 transition-colors">Home</a>
        <a href="#" class="hover:text-blue-600 transition-colors">About</a>
        <a href="#" class="hover:text-blue-600 transition-colors">Work</a>
        <a href="#" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
          Contact
        </a>
      </div>

      <!-- Hamburger (visible only on mobile) -->
      <button class="md:hidden p-2 rounded-md text-gray-500 hover:bg-gray-100"
              @click="open = !open">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path x-show="!open" stroke-linecap="round" stroke-linejoin="round"
                stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          <path x-show="open" stroke-linecap="round" stroke-linejoin="round"
                stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile dropdown menu -->
  <div class="md:hidden" x-show="open" x-transition>
    <div class="px-4 pt-2 pb-4 space-y-1 border-t border-gray-100">
      <a href="#" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-gray-50">Home</a>
      <a href="#" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-gray-50">About</a>
      <a href="#" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-gray-50">Work</a>
    </div>
  </div>
</nav>

HTML

Full Editor

Related Resources

Tailwind CSS Reference

Complete tag & property list

Tailwind CSS How-To Guides

Step-by-step practical guides

Tailwind CSS Exercises

Practice what you've learned