Responsive Nav (part 1)

Responsive Navigation Overview

A responsive navbar is essential for any website. On desktop, it shows all navigation links in a horizontal row. On mobile, it collapses into a hamburger menu. In this tutorial, we will build the HTML and Tailwind structure. In part 2, we will add the JavaScript toggle.

The Structure

<nav class="bg-white shadow-sm">
  <div class="max-w-6xl mx-auto px-4">
    <div class="flex items-center justify-between h-16">

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

      <!-- Desktop menu -->
      <ul class="hidden md:flex items-center space-x-8">
        <li><a href="#" class="text-gray-700 hover:text-indigo-600 font-medium text-sm">Home</a></li>
        <li><a href="#" class="text-gray-700 hover:text-indigo-600 font-medium text-sm">About</a></li>
        <li><a href="#" class="text-gray-700 hover:text-indigo-600 font-medium text-sm">Services</a></li>
        <li><a href="#" class="text-gray-700 hover:text-indigo-600 font-medium text-sm">Portfolio</a></li>
        <li><a href="#" class="text-gray-700 hover:text-indigo-600 font-medium text-sm">Contact</a></li>
      </ul>

      <!-- Desktop CTA -->
      <a href="#" class="hidden md:inline-block bg-indigo-600 text-white text-sm font-semibold px-4 py-2 rounded-lg hover:bg-indigo-700">
        Get Started
      </a>

      <!-- Mobile hamburger button -->
      <button id="menu-btn" class="md:hidden p-2 rounded-lg hover:bg-gray-100 focus:outline-none">
        <svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>

    <!-- Mobile menu (hidden by default) -->
    <div id="mobile-menu" class="hidden md:hidden pb-4">
      <ul class="space-y-2">
        <li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 rounded-lg font-medium">Home</a></li>
        <li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 rounded-lg font-medium">About</a></li>
        <li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 rounded-lg font-medium">Services</a></li>
        <li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 rounded-lg font-medium">Portfolio</a></li>
        <li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 rounded-lg font-medium">Contact</a></li>
      </ul>
      <a href="#" class="block mt-3 mx-4 text-center bg-indigo-600 text-white font-semibold py-2.5 rounded-lg hover:bg-indigo-700">
        Get Started
      </a>
    </div>
  </div>
</nav>

Key Patterns Explained

Show/Hide with Breakpoints

Mobile Menu Links

Mobile links use block so each link fills the full width, making it easy to tap. The hover:bg-indigo-50 and rounded-lg give a nice touch feedback.

Hamburger Icon

The three-line hamburger is an inline SVG. We gave it an id="menu-btn" to target with JavaScript in part 2.

Sticky Navbar

To make the navbar stick to the top when scrolling:

<nav class="bg-white shadow-sm sticky top-0 z-50">
  ...
</nav>

• sticky — Uses position: sticky
• top-0 — Sticks to the top of the viewport
• z-50 — Ensures it stays above other content

Transparent Navbar (Hero Overlay)

<nav class="absolute top-0 left-0 right-0 z-50">
  <div class="max-w-6xl mx-auto px-4 flex items-center justify-between h-16">
    <a href="#" class="text-xl font-bold text-white">Brand</a>
    <ul class="hidden md:flex items-center space-x-8">
      <li><a href="#" class="text-white/80 hover:text-white font-medium text-sm">Home</a></li>
      <li><a href="#" class="text-white/80 hover:text-white font-medium text-sm">About</a></li>
      <li><a href="#" class="text-white/80 hover:text-white font-medium text-sm">Contact</a></li>
    </ul>
  </div>
</nav>

<!-- Hero section behind the nav -->
<section class="bg-gradient-to-r from-indigo-600 to-purple-700 text-white pt-24 pb-16">
  <div class="max-w-4xl mx-auto text-center px-4">
    <h1 class="text-5xl font-extrabold">Welcome</h1>
  </div>
</section>

Recap

• Use hidden md:flex / md:hidden to swap between mobile and desktop views.
• Mobile menu is hidden by default; JavaScript will toggle it (next tutorial).
• Mobile links use block for full-width tap targets.
• sticky top-0 z-50 creates a sticky navbar.

In part 2, we will add the JavaScript toggle and dropdown functionality.