Responsive CSS Navbar with Hamburger Menu — Live CSS Playground

{CF} CodeFronts Back to CSS Navbars Responsive CSS Navbar with Hamburger Menu CSS + JS

HTML

<section class="nb-hbg" aria-label="Verdure editorial hamburger navbar demo">
  <nav aria-label="Primary">
    <div class="nav-inner">
      <div class="issue-tag">No. 47</div>
      <a href="#" class="brand">Verd<em>ure</em></a>
      <div class="rule-v" aria-hidden="true"></div>
      <ul class="nav-links" role="menubar">
        <li role="none"><a href="#" class="active" role="menuitem">Features</a></li>
        <li role="none"><a href="#" role="menuitem">Culture</a></li>
        <li role="none"><a href="#" role="menuitem">Opinion</a></li>
        <li role="none"><a href="#" role="menuitem">Science</a></li>
        <li role="none"><a href="#" role="menuitem">Archive</a></li>
      </ul>
      <div class="nav-spacer"></div>
      <div class="nav-actions">
        <button class="btn-search" type="button" aria-label="Search">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        </button>
        <button class="btn-subscribe" type="button">Subscribe</button>
      </div>
      <button class="hamburger" type="button" data-nb-hbg-burger aria-label="Open menu" aria-expanded="false" aria-controls="nb-hbg-drawer">
        <span></span><span></span><span></span>
      </button>
    </div>
  </nav>

  <div class="mobile-drawer" id="nb-hbg-drawer" data-nb-hbg-drawer aria-hidden="true">
    <div class="drawer-grid">
      <a href="#" class="drawer-item">
        <span class="drawer-item-num">01</span>
        <span class="drawer-item-label">Features</span>
        <span class="drawer-item-sub">Long reads &amp; investigations</span>
      </a>
      <a href="#" class="drawer-item">
        <span class="drawer-item-num">02</span>
        <span class="drawer-item-label">Culture</span>
        <span class="drawer-item-sub">Arts, film &amp; society</span>
      </a>
      <a href="#" class="drawer-item">
        <span class="drawer-item-num">03</span>
        <span class="drawer-item-label">Opinion</span>
        <span class="drawer-item-sub">Voices &amp; perspectives</span>
      </a>
      <a href="#" class="drawer-item">
        <span class="drawer-item-num">04</span>
        <span class="drawer-item-label">Science</span>
        <span class="drawer-item-sub">Research &amp; discovery</span>
      </a>
      <a href="#" class="drawer-item">
        <span class="drawer-item-num">05</span>
        <span class="drawer-item-label">Archive</span>
        <span class="drawer-item-sub">Back issues &amp; classics</span>
      </a>
      <a href="#" class="drawer-item">
        <span class="drawer-item-num">06</span>
        <span class="drawer-item-label">About</span>
        <span class="drawer-item-sub">Our story &amp; mission</span>
      </a>
    </div>
    <div class="drawer-bottom">
      <span class="drawer-tagline">Independent since 2008</span>
      <button class="drawer-cta" type="button">Subscribe — $9/mo</button>
    </div>
  </div>

  <div class="ticker" aria-hidden="true">
    <div class="ticker-inner">
      <span>World Press Freedom Day</span>
      <span>The Climate Issue — Out Now</span>
      <span>Interview: The Architects of AI</span>
      <span>Summer Reading List 2026</span>
      <span>World Press Freedom Day</span>
      <span>The Climate Issue — Out Now</span>
      <span>Interview: The Architects of AI</span>
      <span>Summer Reading List 2026</span>
    </div>
  </div>

  <section class="hero">
    <div class="hero-text">
      <p class="overline">Cover Story</p>
      <h1>The Last<br><em>Quiet</em><br>Places</h1>
      <p class="deck">As noise pollution reaches crisis levels in every major city, researchers are mapping the world's remaining acoustic sanctuaries — and what their disappearance will cost us.</p>
      <a href="#" class="read-more">
        Read the feature
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12,5 19,12 12,19"/></svg>
      </a>
    </div>
    <div class="hero-visual" aria-hidden="true">
      <div class="hero-pattern"></div>
      <div class="hero-pullquote">
        <blockquote>"Silence is not the absence of sound — it is the presence of everything we've forgotten to hear."</blockquote>
        <cite>Dr. Helena Marsh, Acoustic Ecologist</cite>
      </div>
    </div>
  </section>
</section>

CSS

/* ─── 01 Verdure Editorial Hamburger — magazine navbar UI ──────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=DM+Mono:wght@300;400;500&display=swap');

.nb-hbg {
  --nb-hbg-ink: #0e0d0b;
  --nb-hbg-paper: #f5f0e8;
  --nb-hbg-rust: #c4451c;
  --nb-hbg-muted: #8a8070;
  --nb-hbg-rule: #d4cdc0;
  --nb-hbg-nav-h: 72px;

  position: relative;
  width: 100%;
  min-height: 820px;
  background: var(--nb-hbg-paper);
  color: var(--nb-hbg-ink);
  font-family: 'DM Mono', monospace;
  overflow: hidden;
  box-sizing: border-box;
}
.nb-hbg *, .nb-hbg *::before, .nb-hbg *::after { box-sizing: border-box; margin: 0; padding: 0; }

.nb-hbg nav { position: absolute; top: 0; left: 0; right: 0; z-index: 100; background: var(--nb-hbg-paper); border-bottom: 2px solid var(--nb-hbg-ink); height: var(--nb-hbg-nav-h); }
.nb-hbg .nav-inner { max-width: 1400px; margin: 0 auto; height: 100%; display: flex; align-items: center; padding: 0 2rem; gap: 2rem; }
.nb-hbg .issue-tag { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--nb-hbg-paper); background: var(--nb-hbg-rust); padding: 3px 8px; flex-shrink: 0; }
.nb-hbg .brand { font-family: 'Playfair Display', serif; font-size: 1.7rem; font-weight: 900; letter-spacing: -0.02em; color: var(--nb-hbg-ink); text-decoration: none; line-height: 1; flex-shrink: 0; }
.nb-hbg .brand em { font-style: italic; color: var(--nb-hbg-rust); }
.nb-hbg .rule-v { width: 1px; height: 28px; background: var(--nb-hbg-rule); flex-shrink: 0; }
.nb-hbg .nav-links { display: flex; align-items: center; gap: 0; list-style: none; flex: 1; }
.nb-hbg .nav-links a { display: flex; align-items: center; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nb-hbg-muted); text-decoration: none; padding: 0 1.1rem; height: var(--nb-hbg-nav-h); border-right: 1px solid var(--nb-hbg-rule); transition: color 0.15s, background 0.15s; position: relative; }
.nb-hbg .nav-links li:first-child a { border-left: 1px solid var(--nb-hbg-rule); }
.nb-hbg .nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--nb-hbg-rust); transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease; }
.nb-hbg .nav-links a:hover { color: var(--nb-hbg-ink); background: rgba(196,69,28,0.04); }
.nb-hbg .nav-links a:hover::after, .nb-hbg .nav-links a.active::after { transform: scaleX(1); }
.nb-hbg .nav-links a.active { color: var(--nb-hbg-ink); }
.nb-hbg .nav-spacer { flex: 1; }
.nb-hbg .nav-actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.nb-hbg .btn-subscribe { font-family: 'DM Mono', monospace; font-size: 0.65rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nb-hbg-paper); background: var(--nb-hbg-ink); border: none; padding: 9px 18px; cursor: pointer; transition: background 0.15s; }
.nb-hbg .btn-subscribe:hover { background: var(--nb-hbg-rust); }
.nb-hbg .btn-search { background: none; border: none; cursor: pointer; padding: 6px; color: var(--nb-hbg-muted); transition: color 0.15s; display: flex; }
.nb-hbg .btn-search:hover { color: var(--nb-hbg-ink); }

.nb-hbg .hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 6px; flex-shrink: 0; }
.nb-hbg .hamburger span { display: block; width: 100%; height: 1.5px; background: var(--nb-hbg-ink); transition: transform 0.3s cubic-bezier(0.23,1,0.32,1), opacity 0.2s; transform-origin: center; }
.nb-hbg .hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nb-hbg .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nb-hbg .hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nb-hbg .mobile-drawer { position: absolute; top: var(--nb-hbg-nav-h); left: 0; right: 0; background: var(--nb-hbg-ink); z-index: 99; transform: translateY(-101%); transition: transform 0.4s cubic-bezier(0.23,1,0.32,1); border-bottom: 3px solid var(--nb-hbg-rust); }
.nb-hbg .mobile-drawer.open { transform: translateY(0); }
.nb-hbg .drawer-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,0.08); }
.nb-hbg .drawer-item { display: flex; flex-direction: column; padding: 1.5rem 2rem; border-right: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); text-decoration: none; transition: background 0.15s; position: relative; overflow: hidden; }
.nb-hbg .drawer-item:hover { background: rgba(196,69,28,0.12); }
.nb-hbg .drawer-item:nth-child(even) { border-right: none; }
.nb-hbg .drawer-item-num { font-size: 0.6rem; letter-spacing: 0.15em; color: var(--nb-hbg-rust); margin-bottom: 0.5rem; }
.nb-hbg .drawer-item-label { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 700; color: var(--nb-hbg-paper); line-height: 1.1; }
.nb-hbg .drawer-item-sub { font-size: 0.6rem; letter-spacing: 0.08em; color: rgba(245,240,232,0.4); margin-top: 0.4rem; text-transform: uppercase; }
.nb-hbg .drawer-bottom { padding: 1.5rem 2rem; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,0.08); }
.nb-hbg .drawer-tagline { font-size: 0.65rem; letter-spacing: 0.1em; color: rgba(245,240,232,0.35); text-transform: uppercase; }
.nb-hbg .drawer-cta { font-family: 'DM Mono', monospace; font-size: 0.65rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nb-hbg-ink); background: var(--nb-hbg-rust); border: none; padding: 9px 18px; cursor: pointer; }

.nb-hbg .ticker { background: var(--nb-hbg-rust); overflow: hidden; white-space: nowrap; padding: 0.6rem 0; margin-top: var(--nb-hbg-nav-h); }
.nb-hbg .ticker-inner { display: inline-block; animation: nb-hbg-ticker 18s linear infinite; }
.nb-hbg .ticker span { font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--nb-hbg-paper); padding: 0 3rem; }
.nb-hbg .ticker span::before { content: '◆  '; }
@keyframes nb-hbg-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.nb-hbg .hero { min-height: 680px; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 2px solid var(--nb-hbg-ink); }
.nb-hbg .hero-text { padding: 5rem 3rem 4rem; border-right: 2px solid var(--nb-hbg-ink); display: flex; flex-direction: column; justify-content: center; }
.nb-hbg .overline { font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--nb-hbg-rust); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem; }
.nb-hbg .overline::before { content: ''; width: 24px; height: 1.5px; background: var(--nb-hbg-rust); }
.nb-hbg h1 { font-family: 'Playfair Display', serif; font-size: clamp(3rem, 5vw, 5.5rem); font-weight: 900; line-height: 1.0; letter-spacing: -0.02em; color: var(--nb-hbg-ink); margin-bottom: 1.5rem; }
.nb-hbg h1 em { font-style: italic; color: var(--nb-hbg-rust); }
.nb-hbg .deck { font-size: 1rem; line-height: 1.65; color: var(--nb-hbg-muted); max-width: 38ch; margin-bottom: 2.5rem; }
.nb-hbg .read-more { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nb-hbg-ink); text-decoration: none; border-bottom: 1.5px solid var(--nb-hbg-ink); padding-bottom: 2px; transition: color 0.15s, border-color 0.15s; }
.nb-hbg .read-more:hover { color: var(--nb-hbg-rust); border-color: var(--nb-hbg-rust); }
.nb-hbg .read-more svg { transition: transform 0.2s; }
.nb-hbg .read-more:hover svg { transform: translateX(4px); }
.nb-hbg .hero-visual { background: var(--nb-hbg-ink); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.nb-hbg .hero-pattern { position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,0.04) 39px, rgba(255,255,255,0.04) 40px), repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,0.04) 39px, rgba(255,255,255,0.04) 40px); }
.nb-hbg .hero-pullquote { position: relative; z-index: 1; padding: 3rem; text-align: center; }
.nb-hbg .hero-pullquote blockquote { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 3vw, 3rem); font-weight: 400; font-style: italic; color: var(--nb-hbg-paper); line-height: 1.3; }
.nb-hbg .hero-pullquote cite { display: block; font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--nb-hbg-rust); margin-top: 1.5rem; font-style: normal; }

@media (max-width: 900px) {
  .nb-hbg .nav-links, .nb-hbg .rule-v, .nb-hbg .issue-tag, .nb-hbg .btn-subscribe, .nb-hbg .btn-search { display: none; }
  .nb-hbg .hamburger { display: flex; }
  .nb-hbg .hero { grid-template-columns: 1fr; }
  .nb-hbg .hero-text { border-right: none; border-bottom: 2px solid var(--nb-hbg-ink); padding: 3rem 1.5rem; }
  .nb-hbg .hero-pullquote blockquote { font-size: 1.6rem; }
  .nb-hbg .drawer-grid { grid-template-columns: 1fr; }
  .nb-hbg .drawer-item { border-right: none; }
}
@media (max-width: 500px) {
  .nb-hbg .nav-inner { padding: 0 1rem; }
  .nb-hbg .hero-text { padding: 2.5rem 1rem 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-hbg .ticker-inner, .nb-hbg .hamburger span, .nb-hbg .mobile-drawer, .nb-hbg .read-more svg { animation: none !important; transition: none !important; }
}

(() => {
  // Scoped hamburger + drawer wiring. The source mock binds a click
  // listener to `document` to close on outside-click — re-scope to
  // the wrapper so two demos can coexist without interfering with
  // each other or the gallery page chrome.
  const root = document.querySelector('.nb-hbg');
  if (!root) return;
  const burger = root.querySelector('[data-nb-hbg-burger]');
  const drawer = root.querySelector('[data-nb-hbg-drawer]');
  if (!burger || !drawer) return;

  function setOpen(open) {
    burger.classList.toggle('open', open);
    drawer.classList.toggle('open', open);
    burger.setAttribute('aria-expanded', open);
    drawer.setAttribute('aria-hidden', !open);
  }

  burger.addEventListener('click', (e) => {
    e.stopPropagation();
    setOpen(!burger.classList.contains('open'));
  });

  // Close on click outside the burger + drawer, but only within
  // this wrapper. Listening on the wrapper itself, not document.
  root.addEventListener('click', (e) => {
    if (!burger.classList.contains('open')) return;
    if (!burger.contains(e.target) && !drawer.contains(e.target)) {
      setOpen(false);
    }
  });
})();