HTML CSS Modern Navbar

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modern Navbar</title>
  <style>
    :root {
      --primary-color: #4a6cf7;
      --secondary-color: #6c757d;
      --dark-color: #212529;
      --white-color: #ffffff;
      --transition: all 0.3s ease-in-out;
    }

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }

body {
      background-color: #f8f9fa;
      color: var(--dark-color);
      line-height: 1.6;
    }

a {
      text-decoration: none;
      color: inherit;
    }

ul {
      list-style: none;
    }

.container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

/* Navbar Styles */
    .navbar {
      background-color: var(--white-color);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      height: 70px;
    }

.navbar-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
    }

.navbar-logo {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--primary-color);
      display: flex;
      align-items: center;
      gap: 8px;
    }

.navbar-logo svg {
      width: 28px;
      height: 28px;
    }

.navbar-menu {
      display: flex;
      align-items: center;
      gap: 30px;
    }

.nav-item {
      position: relative;
    }

.nav-link {
      color: var(--dark-color);
      font-weight: 500;
      padding: 8px 0;
      position: relative;
      transition: var(--transition);
    }

.nav-link:hover, .nav-link.active {
      color: var(--primary-color);
    }

.nav-link::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background-color: var(--primary-color);
      transition: var(--transition);
    }

.nav-link:hover::after, .nav-link.active::after {
      width: 100%;
    }

/* Dropdown Styles */
    .dropdown {
      position: relative;
    }

.dropdown-toggle {
      display: flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
    }

.dropdown-toggle svg {
      transition: var(--transition);
    }

.dropdown.active .dropdown-toggle svg {
      transform: rotate(180deg);
    }

.dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      background-color: var(--white-color);
      min-width: 200px;
      border-radius: 8px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      padding: 10px 0;
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: var(--transition);
      z-index: 100;
    }

.dropdown.active .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

.dropdown-item {
      padding: 8px 20px;
      display: block;
      font-weight: 500;
      transition: var(--transition);
    }

.dropdown-item:hover {
      background-color: rgba(74, 108, 247, 0.1);
      color: var(--primary-color);
    }

/* Action Buttons */
    .navbar-actions {
      display: flex;
      align-items: center;
      gap: 15px;
    }

.action-btn {
      padding: 8px 20px;
      border-radius: 5px;
      font-weight: 500;
      transition: var(--transition);
      cursor: pointer;
    }

.btn-outline {
      border: 1.5px solid var(--primary-color);
      color: var(--primary-color);
      background-color: transparent;
    }

.btn-outline:hover {
      background-color: var(--primary-color);
      color: var(--white-color);
    }

.btn-filled {
      background-color: var(--primary-color);
      color: var(--white-color);
      border: 1.5px solid var(--primary-color);
    }

.btn-filled:hover {
      background-color: transparent;
      color: var(--primary-color);
    }

/* Mobile Menu Toggle */
    .menu-toggle {
      display: none;
      cursor: pointer;
      width: 24px;
      height: 24px;
      position: relative;
      z-index: 101;
    }

.menu-toggle span {
      display: block;
      width: 100%;
      height: 2px;
      background-color: var(--dark-color);
      border-radius: 4px;
      position: absolute;
      transition: var(--transition);
    }

.menu-toggle span:nth-child(1) {
      top: 5px;
    }

.menu-toggle span:nth-child(2) {
      top: 50%;
      transform: translateY(-50%);
    }

.menu-toggle span:nth-child(3) {
      bottom: 5px;
    }

.menu-toggle.active span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

.menu-toggle.active span:nth-child(2) {
      opacity: 0;
    }

.menu-toggle.active span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

/* Main Content (for demo purposes) */
    .main-content {
      margin-top: 100px;
      padding: 20px;
      text-align: center;
    }

.main-content h1 {
      font-size: 2.5rem;
      margin-bottom: 20px;
      color: var(--primary-color);
    }

.main-content p {
      font-size: 1.1rem;
      max-width: 700px;
      margin: 0 auto;
    }

/* Responsive Styles */
    @media (max-width: 991px) {
      .menu-toggle {
        display: block;
      }

.navbar-menu {
        position: fixed;
        top: 0;
        right: -100%;
        background-color: var(--white-color);
        height: 100vh;
        width: 280px;
        flex-direction: column;
        align-items: flex-start;
        padding: 100px 30px 30px;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        transition: var(--transition);
        gap: 15px;
        overflow-y: auto;
      }

.navbar-menu.active {
        right: 0;
      }

.nav-item {
        width: 100%;
      }

.nav-link {
        display: block;
        padding: 10px 0;
      }

.dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding-left: 15px;
        display: none;
        min-width: 100%;
        background-color: #f8f9fa;
        border-radius: 4px;
      }

.dropdown.active .dropdown-menu {
        display: block;
      }

.navbar-actions {
        flex-direction: column;
        width: 100%;
        margin-top: 15px;
        gap: 10px;
      }

.action-btn {
        width: 100%;
        text-align: center;
      }
    }
  </style>
</head>
<body>
  
  <nav class="navbar">
    <div class="container navbar-container">
      <a href="#" class="navbar-logo">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 5l0 14M5 12l14 0"></path>
        </svg>
        ModernNav
      </a>

<ul class="navbar-menu">
        <li class="nav-item">
          <a href="#" class="nav-link active">Home</a>
        </li>
        <li class="nav-item dropdown">
          <div class="dropdown-toggle nav-link">
            Features
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="m6 9 6 6 6-6"/>
            </svg>
          </div>
          <ul class="dropdown-menu">
            <li><a href="#" class="dropdown-item">Feature One</a></li>
            <li><a href="#" class="dropdown-item">Feature Two</a></li>
            <li><a href="#" class="dropdown-item">Feature Three</a></li>
            <li><a href="#" class="dropdown-item">Feature Four</a></li>
          </ul>
        </li>
        <li class="nav-item dropdown">
          <div class="dropdown-toggle nav-link">
            Products
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="m6 9 6 6 6-6"/>
            </svg>
          </div>
          <ul class="dropdown-menu">
            <li><a href="#" class="dropdown-item">Product One</a></li>
            <li><a href="#" class="dropdown-item">Product Two</a></li>
            <li><a href="#" class="dropdown-item">Product Three</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">About</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Contact</a>
        </li>
        
        <div class="navbar-actions">
          <a href="#" class="action-btn btn-outline">Login</a>
          <a href="#" class="action-btn btn-filled">Sign Up</a>
        </div>
      </ul>
    </div>
  </nav>

<div class="main-content container">
    <h1>Modern Responsive Navbar</h1>
    <p>This is a fully responsive modern navbar with dropdown menus, mobile hamburger toggle, and smooth animations. Resize the browser to see how it adapts to different screen sizes.</p>
  </div>

// Toggle Mobile Menu
    menuToggle.addEventListener('click', () => {
      menuToggle.classList.toggle('active');
      navbarMenu.classList.toggle('active');
    });

// Handle Dropdowns
    dropdowns.forEach(dropdown => {
      const toggle = dropdown.querySelector('.dropdown-toggle');
      
      toggle.addEventListener('click', (e) => {
        e.preventDefault();
        
        // Close other dropdowns when opening a new one
        dropdowns.forEach(otherDropdown => {
          if (otherDropdown !== dropdown && otherDropdown.classList.contains('active')) {
            otherDropdown.classList.remove('active');
          }
        });
        
        dropdown.classList.toggle('active');
      });
    });

// Close dropdowns when clicking outside
    document.addEventListener('click', (e) => {
      if (!e.target.closest('.dropdown')) {
        dropdowns.forEach(dropdown => {
          dropdown.classList.remove('active');
        });
      }
    });

// Active Link State (for demo purposes)
    navLinks.forEach(link => {
      if (!link.parentElement.classList.contains('dropdown')) {
        link.addEventListener('click', () => {
          navLinks.forEach(otherLink => {
            otherLink.classList.remove('active');
          });
          link.classList.add('active');
        });
      }
    });

// Close mobile menu when a link is clicked
    document.querySelectorAll('.navbar-menu a').forEach(link => {
      link.addEventListener('click', () => {
        if (window.innerWidth <= 991) {
          menuToggle.classList.remove('active');
          navbarMenu.classList.remove('active');
        }
      });
    });

// Handle resize events to reset mobile menu state when switching to desktop
    window.addEventListener('resize', () => {
      if (window.innerWidth > 991) {
        if (menuToggle.classList.contains('active')) {
          menuToggle.classList.remove('active');
          navbarMenu.classList.remove('active');
        }
      }
    });
  </script>
</body>
</html>

HTML CSS Modern Navbar

Recommended

CSS Falling Loading Animation Snippet

CSS Loading Icon Spinner

CSS Animated Login Form Design

HTML

CSS

JS

Recommended

CSS Falling Loading Animation Snippet

CSS Loading Icon Spinner

CSS Animated Login Form Design

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS