20 CSS Hamburger Menus 05 / 20

Responsive Navbar with Mobile-Only Hamburger Toggle

Complete sticky glass header.

CSS + JS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="chm-05">
  <div class="chm-05__scene">
    <header class="chm-05__header">
      <div class="chm-05__brand"><span class="chm-05__mk"></span>Meridian</div>
      <nav class="chm-05__links">
        <a href="#">Product</a>
        <a href="#">Systems</a>
        <a href="#">Pricing</a>
        <a href="#">About</a>
        <a class="chm-05__cta" href="#">Get started</a>
      </nav>
      <button class="chm-05__burger" aria-label="Toggle menu">
        <span class="chm-05__b"><i></i><i></i><i></i></span>
      </button>
    </header>

    <div class="chm-05__scrim"></div>
    <aside class="chm-05__sheet">
      <a href="#">Product</a>
      <a href="#">Systems</a>
      <a href="#">Pricing</a>
      <a href="#">About</a>
      <a href="#">Get started →</a>
      <div class="chm-05__badge">Mobile · breakpoint 860px</div>
    </aside>

    <section class="chm-05__hero">
      <div class="chm-05__eyebrow">Responsive Navigation</div>
      <h1>One navbar,<br><span>every screen.</span></h1>
      <p>Full link row on desktop. Below 860px the links fold into a hamburger sheet — pure media-query logic, no layout shift.</p>
      <span class="chm-05__resize-hint">↔ <b>Resize the window</b> past 860px to watch it transform</span>
    </section>
    <div class="chm-05__tag">RESPONSIVE_NAVBAR // 2030</div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&display=swap');

.chm-05, .chm-05 *, .chm-05 *::before, .chm-05 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.chm-05{
  --ink:#101014;--snow:#fbfaf7;--grape:#5b3df5;--coral:#ff5d73;--sun:#ffc24b;--line:rgba(16,16,20,.1);
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Inter Tight',sans-serif;background:var(--snow);color:var(--ink);
  position:relative;
}
.chm-05__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-05__header{position:absolute;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(16px,4vw,40px);
  background:rgba(251,250,247,.7);backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--line)}
.chm-05__brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:1.15rem;letter-spacing:-.01em}
.chm-05__mk{width:26px;height:26px;border-radius:8px;background:conic-gradient(from 120deg,var(--grape),var(--coral),var(--sun),var(--grape));}
.chm-05__links{display:flex;align-items:center;gap:6px}
.chm-05__links a{position:relative;text-decoration:none;color:var(--ink);font-weight:500;font-size:.88rem;padding:8px 14px;border-radius:99px;transition:background .3s,color .3s}
.chm-05__links a:hover{background:rgba(91,61,245,.08);color:var(--grape)}
.chm-05__links .chm-05__cta{background:var(--ink);color:var(--snow);font-weight:600}
.chm-05__links .chm-05__cta:hover{background:var(--grape);color:#fff}
.chm-05__burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:transparent;cursor:pointer;place-items:center}
.chm-05__b{width:20px;height:13px;position:relative}
.chm-05__b i{position:absolute;left:0;height:2.2px;width:100%;background:var(--ink);border-radius:3px;transition:transform .45s cubic-bezier(.7,0,.2,1),opacity .3s}
.chm-05__b i:nth-child(1){top:0}.chm-05__b i:nth-child(2){top:5.5px}.chm-05__b i:nth-child(3){top:11px}
.chm-05.is-open .chm-05__b i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.chm-05.is-open .chm-05__b i:nth-child(2){opacity:0}
.chm-05.is-open .chm-05__b i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.chm-05__sheet{position:absolute;top:0;right:0;height:100%;width:min(300px,80%);z-index:55;
  background:var(--ink);color:var(--snow);padding:80px 28px 28px;
  transform:translateX(110%);transition:transform .6s cubic-bezier(.16,1,.3,1);display:none;flex-direction:column}
.chm-05__sheet a{font-weight:500;font-size:1.3rem;color:var(--snow);text-decoration:none;padding:12px 0;border-bottom:1px solid rgba(251,250,247,.1);transition:color .3s,padding-left .3s;opacity:0;transform:translateX(24px)}
.chm-05.is-open .chm-05__sheet a{opacity:1;transform:none}
.chm-05__sheet a:nth-child(1){transition:.5s .12s}
.chm-05__sheet a:nth-child(2){transition:.5s .18s}
.chm-05__sheet a:nth-child(3){transition:.5s .24s}
.chm-05__sheet a:nth-child(4){transition:.5s .30s}
.chm-05__sheet a:nth-child(5){transition:.5s .36s}
.chm-05__sheet a:hover{color:var(--sun);padding-left:8px}
.chm-05__badge{margin-top:auto;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(251,250,247,.5)}
.chm-05__scrim{position:absolute;inset:0;z-index:50;background:rgba(16,16,20,.4);opacity:0;pointer-events:none;transition:.4s;backdrop-filter:blur(2px)}
.chm-05.is-open .chm-05__sheet{transform:translateX(0)}
.chm-05.is-open .chm-05__scrim{opacity:1;pointer-events:auto}
.chm-05__hero{min-height:460px;display:flex;flex-direction:column;justify-content:center;padding:80px clamp(16px,4vw,40px) 40px;max-width:1100px}
.chm-05__eyebrow{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grape);font-weight:600;margin-bottom:18px}
.chm-05__eyebrow::before{content:"";width:24px;height:2px;background:var(--coral)}
.chm-05__hero h1{font-weight:600;font-size:clamp(2rem,6vw,4rem);line-height:.96;letter-spacing:-.02em}
.chm-05__hero h1 span{background:linear-gradient(100deg,var(--grape),var(--coral));-webkit-background-clip:text;background-clip:text;color:transparent}
.chm-05__hero p{margin-top:16px;max-width:480px;font-size:.95rem;line-height:1.6;color:#444}
.chm-05__resize-hint{margin-top:22px;display:inline-flex;align-items:center;gap:10px;font-size:11px;color:#666;background:#fff;border:1px solid var(--line);padding:8px 14px;border-radius:99px;align-self:flex-start}
.chm-05__resize-hint b{color:var(--grape)}
@media(max-width:860px){
  .chm-05 .chm-05__links{display:none}
  .chm-05 .chm-05__burger{display:grid}
  .chm-05 .chm-05__sheet{display:flex}
}
.chm-05__tag{position:absolute;bottom:18px;left:clamp(16px,4vw,40px);z-index:5;font-size:10px;letter-spacing:.3em;color:rgba(16,16,20,.4);font-weight:600}

@media (prefers-reduced-motion: reduce){
  .chm-05__b i,.chm-05__sheet,.chm-05__sheet a,.chm-05__scrim{transition:none !important}
}
(() => {
  const root = document.querySelector('.chm-05');
  if (!root) return;
  const btn = root.querySelector('.chm-05__burger');
  const scrim = root.querySelector('.chm-05__scrim');
  btn.addEventListener('click', () => root.classList.toggle('is-open'));
  scrim.addEventListener('click', () => root.classList.remove('is-open'));
})();

More from 20 CSS Hamburger Menus

Flexbox Navbar with Right-Aligned Hamburger IconCircular Expand / Radial Ripple Mobile MenuFixed Sticky Header with Shrinking Hamburger IconNeumorphic Hamburger Menu Toggle ButtonBrutalist CSS Bordered Hamburger Menu3D Rotating Canvas Mobile Hamburger MenuPure CSS Hamburger Menu (No JavaScript)Bootstrap 5 Responsive Navbar with HamburgerCSS Slide Down Dropdown Hamburger MenuMinimalist 3-Line CSS Menu Icon with Hover EffectsHamburger Menu with Morphing Icon AnimationsFull-Screen Overlay Mobile Navigation
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →