BUILD WITH ME · DAY 2 / 7

Responsive Navbar

Har website ka pehla hissa hota hai navbar. Aaj aisa navbar banaoge jo laptop par ek line me dikhe aur phone par ☰ hamburger menu ban jaaye. HTML + CSS + sirf 5 lines JavaScript.

⏱ 20 min🎯 Beginner🛠 Flexbox, media queries, mobile menu

display: flex + justify-content: space-between — logo left, links right
position: sticky — scroll karne par bhi navbar upar chipka rahe
@media (max-width: 600px) — phone ke liye alag CSS
classList.toggle() — ek click me class lagao / hatao
addEventListener('click', …) — button click par kuch karna

Seedha code karo ↓Step by step

Aaj yeh banega 👇

Step by step

Har step me "Editor me daalo" dabao — ya best: khud type karo, haath se likha code yaad rehta hai. ✍️

1Navbar + hero ka HTMLindex.html

<nav> me 3 cheezein: logo, ☰ button aur links ki list (<ul>).
Button aur list ko id diya (menuBtn, links) — JS inhe id se pakdega.
<header class="hero"> — navbar ke neeche ka bada welcome section.

  <nav class="nav">
    <a class="logo" href="#">Aarav<span>.dev</span></a>
    <button class="menu-btn" id="menuBtn">☰</button>
    <ul class="links" id="links">
      <li><a href="#">Home</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <header class="hero">
    <h1>Hi, I'm Aarav 👋</h1>
    <p>I build simple, fast websites.</p>
    <a class="btn" href="#">See my work</a>
  </header>

2Base + flex navbarstyle.css

box-sizing: border-box — padding width ke andar gine, layout nahi bigadta.
display: flex se logo, button, links ek line me; space-between unhe dono kinaaron par bhej deta hai.
position: sticky; top: 0 — scroll par navbar upar hi rehta hai.
.logo span — sirf ".dev" ko pink kiya. Chhota detail, bada effect ✨

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: sans-serif;
  background: #0f172a;
  color: #fff;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: #fff;
  position: sticky;
  top: 0;
}
.logo {
  font-size: 24px;
  font-weight: bold;
  color: #0f172a;
  text-decoration: none;
}
.logo span { color: #ec4899; }

3Links + chhupa hua ☰ buttonstyle.css

.links par bhi flex + gap: 24px — links ke beech barabar jagah.
list-style: none — list ke bullets (•) hata diye.
.menu-btn { display: none } — laptop par ☰ ki zarurat nahi, isliye chhupa diya.

.links {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.links a {
  color: #0f172a;
  text-decoration: none;
  font-weight: 600;
}
.links a:hover { color: #6366f1; }
.menu-btn {
  display: none;
  font-size: 28px;
  background: none;
  border: 0;
  cursor: pointer;
}

4Hero sectionstyle.css

Center text + bada padding = clean welcome section.
.btn wahi pill button hai jo Day 1 me banaya tha — reuse karna seekho 😄

.hero { text-align: center; padding: 80px 20px; }
.hero h1 { font-size: 40px; margin: 0 0 8px; }
.hero p { color: #94a3b8; }
.btn {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 24px;
  border-radius: 999px;
  background: #6366f1;
  color: #fff;
  text-decoration: none;
}

5Media query — phone view 📱style.css

@media (max-width: 600px) ke andar ki CSS sirf 600px se chhoti screen par lagti hai.
Phone par ☰ dikhao (display: block) aur links chhupa do (display: none).
position: absolute; top: 100% — menu navbar ke theek neeche khulta hai.
.links.open — jab JS open class lagayega tab menu dikhega.

/* Mobile: 600px se chhoti screen */
@media (max-width: 600px) {
  .menu-btn { display: block; }
  .links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: #fff;
  }
  .links.open { display: flex; }
  .links a {
    display: block;
    padding: 14px 24px;
    border-top: 1px solid #e2e8f0;
  }
}

65 lines JS — menu togglescript.js

querySelector('#menuBtn') — id se button pakda.
classList.toggle('open') — class hai to hatao, nahi hai to lagao. Ek line me on/off!
Menu khula ho to button par ✕, band ho to ☰ — ? : (ternary) se.
Editor ke preview me dekhna ho to browser window chhoti karo, ya phone par page kholo 📱

const menuBtn = document.querySelector('#menuBtn');
const links = document.querySelector('#links');

menuBtn.addEventListener('click', () => {
  links.classList.toggle('open');
  const isOpen = links.classList.contains('open');
  menuBtn.textContent = isOpen ? '✕' : '☰';
});