Create Mobile Responsive Navbar using Html and Css

Suraj (UI/UX Developer)

Jun 2024

HTML


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Navbar CKD</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <nav class="navbar">
  <div class="navbar-container">
    <a href="#" class="logo">Logo</a>
      <input type="checkbox" id="menu-toggle">
      <label for="menu-toggle" class="menu-icon">&#9776;</label>
      <ul class="nav-menu">
        <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
        <li class="nav-item"><a href="#" class="nav-link">About Us</a></li>
        <li class="nav-item"><a href="#" class="nav-link">Our Service</a></li>
        <li class="nav-item"><a href="#" class="nav-link">Contact Us</a></li>
        <li class="nav-item auth-buttons">
          <a href="#" class="btn register">Register</a>
          <a href="#" class="btn login">Login</a>
        </li>
      </ul>
    </div>
  </nav>
  <h1 class="text-center">Create Mobile Responsive Navbar Simple css Without Using Js</h1>
</body>
</html>

CSS

.navbar {
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
  position: relative;
}

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

.logo {
  font-size: 24px;
  color: #fff;
  text-decoration: none;
}

#menu-toggle {
  display: none;
}

.menu-icon {
  display: none;
  font-size: 24px;
  cursor: pointer;
}

.nav-menu {
  list-style: none;
  display: flex;
}

.nav-item {
  margin-left: 20px;
}

.nav-link {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
}

.nav-link:hover {
  text-decoration: underline;
}

.auth-buttons .btn {
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  margin-left: 10px;
  border: 1px solid #fff;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.btn.login {
  background-color: #ff5d7d; /* Green */
  border: none;
}

.btn.register {
  background-color: #00a61d; /* Blue */
  border: none;
}

.btn:hover {
  background-color: #555;
  border-color: #555;
}

/* Responsive Mobile Css*/

.text-center{text-align: center;}
@media (max-width: 768px) {
  .navbar-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .menu-icon {
        display: block;
        position: absolute;
        right: 12px;
  }

  .nav-menu {
    display: none;
    flex-direction: column;
    width: 100%;
  }

  .nav-menu.active {
    display: flex;
  }

  .nav-item {
    margin: 10px 0;
  }

  .auth-buttons .btn {
    margin: 10px 0;
  }
}

#menu-toggle:checked + .menu-icon + .nav-menu {
  display: flex;
  padding: 0px;
}