Top nav menu

by Imri Paloja

HTML

<script src="https://cdn.tailwindcss.com"></script>

<nav class="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-sm shadow-md">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between items-center h-16">
      <!-- Logo -->
      <div class="flex-shrink-0">
        <a href="#" class="text-xl font-bold text-gray-900">YourBrand</a>
      </div>

      <!-- Desktop Menu -->
      <div class="hidden md:flex space-x-8">
        <a href="#home" class="text-gray-700 hover:text-purple-600 transition-colors">Home</a>
        <a href="#about" class="text-gray-700 hover:text-purple-600 transition-colors">About</a>
        <a href="#services" class="text-gray-700 hover:text-purple-600 transition-colors">Services</a>
        <a href="#portfolio" class="text-gray-700 hover:text-purple-600 transition-colors">Portfolio</a>
        <a href="#contact" class="text-gray-700 hover:text-purple-600 transition-colors">Contact</a>
      </div>

      <!-- Call to Action Button -->
      <div class="hidden md:block">
        <a href="#" class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors">Sign Up</a>
      </div>

      <!-- Mobile Menu Button -->
      <div class="md:hidden flex items-center">
        <button class="text-gray-700 hover:text-gray-900 focus:outline-none">
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

<!-- Main Content Spacer (to prevent content hiding behind nav) -->
<div class="pt-16"></div>

<!-- Page Content -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <h1 class="text-3xl font-bold mb-4">Welcome to Your Site</h1>
  <p class="text-gray-700 mb-4">Scroll down to see the sticky navigation in...

JavaScript

tailwind.config = {
  theme: {
    extend: {
      colors: {
        'eb-red': '#e60000',
        'eb-dark': '#1b1e1f',
        'eb-gray': '#181a1b',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
};