Q147- How do you create a responsive navigation menu using only CSS?

You can create a responsive menu using CSS Flexbox/Grid, media queries, and optionally a checkbox toggle for mobile menus without JavaScript.

---

🔹 Example: Responsive Navigation

<nav class="navbar">
  <div class="logo">MySite</div>

  <!-- Hidden checkbox for mobile toggle -->
  <input type="checkbox" id="menu-toggle" />
  <label for="menu-toggle" class="menu-icon">&#9776;</label>

  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

/* Basic Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #333;
  padding: 0.5rem 1rem;
}

.logo {
  color: white;
  font-size: 1.5rem;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1rem;
}

.nav-links li a {
  color: white;
  text-decoration: none;
  padding: 0.5rem;
}

.nav-links li a:hover {
  background: #555;
  border-radius: 4px;
}

/* Mobile Menu */
.menu-icon {
  display: none;
  font-size: 1.5rem;
  color: white;
  cursor: pointer;
}

#menu-toggle {
  display: none;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .nav-links {
    position: absolute;
    top: 60px;
    left: -100%; /* hide menu */
    flex-direction: column;
    background: #333;
    width: 100%;
    transition: left 0.3s ease;
  }

  .nav-links li {
    text-align: center;
    margin: 1rem 0;
  }

  /* Show menu when checkbox is checked */
  #menu-toggle:checked ~ .nav-links {
    left: 0;
  }

  .menu-icon {
    display: block;
  }
}

---

🔹 How It Works

1. Desktop → Flexbox shows menu items in a row.
2. Mobile → Menu hidden by default using left: -100%.
3. Checkbox hack → Toggling checkbox changes the menu’s position to left: 0.
4. Media queries → Adjust layout based on screen width.

---

💡 Key Points

• Fully CSS-based, no JavaScript required.
• Works for small screens and desktop screens.
• Uses flexbox, media queries, and :checked pseudo-class.

---

In short:
Responsive navigation can be built using CSS Flexbox + media queries + a hidden checkbox toggle to show/hide the menu on mobile screens.