8 CSS Navbar Designs01 / 08

CSS + JSMIT licensed

Responsive CSS Navbar with Hamburger Menu

A literary-magazine editorial navbar UI in ink and paper — proving that a responsive hamburger nav can carry serious typographic identity instead of disappearing into a sans-serif default. Top bar with a numbered issue badge (No. 47), a Playfair Display wordmark with italic rust accent, a column-ruled link list (Features / Culture / Opinion / Science / Archive) with a rust underline sweep on hover, a search icon button, and a black "Subscribe" CTA. On mobile (<900px) the desktop links hide and a 1.5px-line hamburger appears; clicking it morphs the three lines into an X and reveals a full-bleed dark drawer with six numbered category tiles (each with a Playfair label + monospace subtext) and a footer row carrying the tagline + "$9/mo" subscribe CTA. Below the navbar a rust-colored marquee ticker scrolls four headline items. Playfair Display + DM Mono. Best for editorial publications, online magazines, literary sites, indie newsletter brands, content-led marketing pages.

Published Updated

Live Demo
Try it

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

The code

<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>
/* ─── 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);
    }
  });
})();
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Navbar Design from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Responsive CSS Navbar with Hamburger Menu
Source: https://codefronts.com/navigation/css-navbars/responsive-css-navbar-with-hamburger-menu/

A literary-magazine editorial navbar UI in ink and paper — proving that a responsive hamburger nav can carry serious typographic identity instead of disappearing into a sans-serif default. Top bar with a numbered issue badge (No. 47), a Playfair Display wordmark with italic rust accent, a column-ruled link list (Features / Culture / Opinion / Science / Archive) with a rust underline sweep on hover, a search icon button, and a black "Subscribe" CTA. On mobile (<900px) the desktop links hide and a 1.5px-line hamburger appears; clicking it morphs the three lines into an X and reveals a full-bleed dark drawer with six numbered category tiles (each with a Playfair label + monospace subtext) and a footer row carrying the tagline + "$9/mo" subscribe CTA. Below the navbar a rust-colored marquee ticker scrolls four headline items. Playfair Display + DM Mono. Best for editorial publications, online magazines, literary sites, indie newsletter brands, content-led marketing pages.
## HTML
```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
```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;
  }
}
```

## JavaScript
```js
(() => {
  // 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);
    }
  });
})();
```

Techniques used in this demo

role="" (ARIA)MDN ↗grid-templateMDN ↗@keyframesMDN ↗clamp()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →