20 CSS Hamburger Menus 15 / 20

Flexbox Navbar with Right-Aligned Hamburger Icon

Textbook justify-content: space-between + align-items: center — logo locked left, hamburger snapped hard right, with a desktop link cluster that hides on mobile.

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

The code

<div class="chm-15">
  <div class="chm-15__scene">
    <nav class="chm-15__navbar">
      <div class="chm-15__logo"><span class="chm-15__mk">⬡</span>Axis</div>
      <div class="chm-15__right">
        <div class="chm-15__desk">
          <a href="#">Work</a><a href="#">Studio</a><a href="#">Lab</a>
        </div>
        <button class="chm-15__burger" aria-label="Toggle menu"><span class="chm-15__b"><i></i><i></i><i></i></span></button>
      </div>
    </nav>

    <div class="chm-15__scrim"></div>
    <aside class="chm-15__sheet">
      <a href="#">Work <span>01</span></a>
      <a href="#">Studio <span>02</span></a>
      <a href="#">Lab <span>03</span></a>
      <a href="#">Journal <span>04</span></a>
      <a href="#">Contact <span>05</span></a>
    </aside>

    <section class="chm-15__hero">
      <div class="chm-15__eyebrow">Flexbox Layout</div>
      <h1>Logo left.<br><em>Icon hard right.</em></h1>
      <p>A reliable <code>justify-content: space-between</code> bar with <code>align-items: center</code> — the hamburger snaps perfectly to the right edge, cross-browser.</p>
      <div class="chm-15__code">.navbar { display:flex; justify-content:space-between }</div>
    </section>
    <div class="chm-15__tag">FLEXBOX_NAVBAR // 2030</div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap');
.chm-15, .chm-15 *, .chm-15 *::before, .chm-15 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.chm-15{
  --bg:#101418;--surface:#1a2026;--cyan:#36e0d4;--coral:#ff7a59;--fog:#eef2f3;--muted:#8a96a0;--line:rgba(238,242,243,.08);
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Onest',sans-serif;background:var(--bg);color:var(--fog);
  position:relative;
}
.chm-15__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-15__navbar{display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(18px,4vw,40px);position:absolute;top:0;left:0;right:0;z-index:60;
  background:rgba(16,20,24,.72);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.chm-15__logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;font-size:1.1rem}
.chm-15__mk{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--cyan),var(--coral));display:grid;place-items:center;color:#0d1014;font-weight:800}
.chm-15__right{display:flex;align-items:center;gap:14px}
.chm-15__desk{display:flex;gap:4px}
.chm-15__desk a{color:var(--muted);text-decoration:none;font-weight:500;font-size:.85rem;padding:6px 12px;border-radius:8px;transition:color .3s,background .3s}
.chm-15__desk a:hover{color:var(--cyan);background:rgba(54,224,212,.08)}
.chm-15__burger{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--surface);border:1px solid var(--line);cursor:pointer;flex-shrink:0}
.chm-15__b{width:20px;height:13px;position:relative;display:inline-block}
.chm-15__b i{position:absolute;right:0;height:2.2px;background:var(--fog);border-radius:3px;transition:transform .45s cubic-bezier(.7,0,.2,1),opacity .3s,width .4s}
.chm-15__b i:nth-child(1){top:0;width:100%}.chm-15__b i:nth-child(2){top:5.5px;width:70%}.chm-15__b i:nth-child(3){top:11px;width:100%}
.chm-15.is-open .chm-15__b i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.chm-15.is-open .chm-15__b i:nth-child(2){opacity:0;width:0}
.chm-15.is-open .chm-15__b i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.chm-15__sheet{position:absolute;top:0;right:0;height:100%;width:min(300px,82%);z-index:55;background:var(--surface);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .55s cubic-bezier(.16,1,.3,1);padding:80px 22px 22px;display:flex;flex-direction:column;gap:3px}
.chm-15.is-open .chm-15__sheet{transform:translateX(0)}
.chm-15__sheet a{display:flex;align-items:center;justify-content:space-between;font-size:1.05rem;font-weight:600;color:var(--fog);text-decoration:none;padding:12px 10px;border-radius:10px;transition:background .3s,padding-left .3s,color .3s}
.chm-15__sheet a:hover{background:rgba(54,224,212,.1);padding-left:18px;color:var(--cyan)}
.chm-15__sheet a span{font-family:'Geist Mono',monospace;font-size:.7rem;color:var(--coral)}
.chm-15__scrim{position:absolute;inset:0;z-index:50;background:rgba(16,20,24,.5);opacity:0;pointer-events:none;transition:.4s}
.chm-15.is-open .chm-15__scrim{opacity:1;pointer-events:auto}
.chm-15__hero{max-width:1000px;margin:0 auto;padding:90px 24px 60px}
.chm-15__eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin-bottom:16px}
.chm-15__eyebrow::before{content:"";width:24px;height:2px;background:var(--coral)}
.chm-15__hero h1{font-weight:800;font-size:clamp(2rem,6vw,4rem);line-height:.95;letter-spacing:-.03em}
.chm-15__hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--cyan),var(--coral));-webkit-background-clip:text;background-clip:text;color:transparent}
.chm-15__hero p{margin-top:16px;max-width:500px;font-size:.95rem;color:var(--muted);line-height:1.6}
.chm-15__code{margin-top:22px;display:inline-block;font-family:'Geist Mono',monospace;font-size:11px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:11px 14px;color:var(--cyan)}
.chm-15__tag{position:absolute;bottom:18px;left:clamp(18px,4vw,40px);font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.3em;color:var(--muted);z-index:5}
@media(max-width:760px){.chm-15 .chm-15__desk{display:none}}

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

More from 20 CSS Hamburger Menus

Responsive Navbar with Mobile-Only Hamburger ToggleMinimalist / Floating Hamburger ButtonTailwind CSS Hamburger MenuAccessible Hamburger Menu (WCAG Compliant)Full Screen Blur Overlay Hamburger MenuMobile Bottom Nav Bar with Floating HamburgerMulti-Level Dropdown Hamburger Menu (Nested Accordion)Circular Expand / Radial Ripple Mobile MenuFixed Sticky Header with Shrinking Hamburger IconNeumorphic Hamburger Menu Toggle ButtonBrutalist CSS Bordered Hamburger Menu3D Rotating Canvas Mobile Hamburger Menu
View the full collection →

Search CodeFronts

Loading…

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