20 CSS Hamburger Menus 17 / 20

Fixed Sticky Header with Shrinking Hamburger Icon

Scroll-linked sticky header that compresses padding, shrinks the logo mark, and scales the hamburger down smoothly past a scroll threshold — scroll up to expand again.

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

The code

<div class="chm-17">
  <div class="chm-17__scene">
    <header id="chm-17-hd" class="chm-17__header">
      <div class="chm-17__logo"><span class="chm-17__mk"></span>Altitude</div>
      <button class="chm-17__burger" aria-label="Toggle menu"><span class="chm-17__b"><i></i><i></i><i></i></span></button>
    </header>

    <div class="chm-17__scrim"></div>
    <aside class="chm-17__sheet">
      <a href="#">Home</a><a href="#">Features</a><a href="#">Stories</a><a href="#">Pricing</a><a href="#">Contact</a>
    </aside>

    <div class="chm-17__scroller">
      <section class="chm-17__hero">
        <div class="chm-17__eyebrow">Sticky · Scroll-linked</div>
        <h1>Scroll down — <em>watch it shrink.</em></h1>
        <div class="chm-17__scrolltip">Header compresses, icon scales down</div>
      </section>
      <section class="chm-17__block"><h2>The header stayed pinned. <b>The hamburger got smaller and tighter</b> the moment you scrolled.</h2></section>
      <section class="chm-17__block"><h2>Still here, still compact. <b>Smooth scroll-linked transitions</b> — no layout jump.</h2></section>
      <section class="chm-17__block"><h2><b>Scroll back up</b> and everything expands again.</h2></section>
    </div>
    <div class="chm-17__tag">STICKY_SHRINK // 2030</div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,[email protected],400..800&family=Overpass+Mono:wght@400;600&display=swap');
.chm-17, .chm-17 *, .chm-17 *::before, .chm-17 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.chm-17{
  --bg:#0f1218;--accent:#ff5a3c;--gold:#ffd23f;--fog:#f1f0ec;--muted:#8b909c;--line:rgba(241,240,236,.08);
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Bricolage Grotesque',sans-serif;background:var(--bg);color:var(--fog);
  position:relative;
}
.chm-17__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-17__scroller{position:relative;width:100%;height:460px;overflow-y:auto;scroll-behavior:smooth}
.chm-17__header{position:absolute;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(18px,4vw,40px);
  background:rgba(15,18,24,0);backdrop-filter:blur(0px);border-bottom:1px solid transparent;
  transition:padding .4s ease,background .4s,backdrop-filter .4s,border-color .4s}
.chm-17__header.is-scrolled{padding:10px clamp(18px,4vw,40px);background:rgba(15,18,24,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.chm-17__logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;font-size:1.25rem;transition:font-size .4s}
.chm-17__header.is-scrolled .chm-17__logo{font-size:1rem}
.chm-17__mk{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--gold));transition:width .4s,height .4s}
.chm-17__header.is-scrolled .chm-17__mk{width:22px;height:22px}
.chm-17__burger{width:52px;height:52px;border-radius:14px;background:rgba(241,240,236,.05);border:1px solid var(--line);cursor:pointer;display:grid;place-items:center;
  transition:width .4s,height .4s,border-radius .4s}
.chm-17__header.is-scrolled .chm-17__burger{width:38px;height:38px;border-radius:11px}
.chm-17__b{width:22px;height:14px;position:relative;transition:transform .4s;display:inline-block}
.chm-17__header.is-scrolled .chm-17__b{transform:scale(.78)}
.chm-17__b i{position:absolute;left:0;height:2.4px;width:100%;background:var(--fog);border-radius:3px;transition:transform .45s cubic-bezier(.7,0,.2,1),opacity .3s,background .4s}
.chm-17__b i:nth-child(1){top:0}.chm-17__b i:nth-child(2){top:6px}.chm-17__b i:nth-child(3){top:12px}
.chm-17.is-open .chm-17__b i:nth-child(1){transform:translateY(6px) rotate(45deg);background:var(--accent)}
.chm-17.is-open .chm-17__b i:nth-child(2){opacity:0}
.chm-17.is-open .chm-17__b i:nth-child(3){transform:translateY(-6px) rotate(-45deg);background:var(--accent)}
.chm-17__sheet{position:absolute;top:0;right:0;height:100%;width:min(300px,84%);z-index:55;background:#141821;border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .55s cubic-bezier(.16,1,.3,1);padding:90px 24px 24px}
.chm-17.is-open .chm-17__sheet{transform:translateX(0)}
.chm-17__sheet a{display:block;font-size:1.3rem;font-weight:600;color:var(--fog);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line);transition:color .3s,padding-left .3s}
.chm-17__sheet a:hover{color:var(--accent);padding-left:10px}
.chm-17__scrim{position:absolute;inset:0;z-index:50;background:rgba(15,18,24,.5);opacity:0;pointer-events:none;transition:.4s}
.chm-17.is-open .chm-17__scrim{opacity:1;pointer-events:auto}
.chm-17__scroller section{padding:0 clamp(18px,4vw,40px)}
.chm-17__hero{min-height:460px;display:flex;flex-direction:column;justify-content:center}
.chm-17__eyebrow{font-family:'Overpass Mono',monospace;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.chm-17__hero h1{font-size:clamp(2rem,7vw,4.4rem);font-weight:800;line-height:.92;letter-spacing:-.03em;max-width:14ch}
.chm-17__hero h1 em{font-style:normal;color:var(--accent)}
.chm-17__scrolltip{margin-top:24px;font-family:'Overpass Mono',monospace;font-size:11px;color:var(--muted);display:flex;align-items:center;gap:8px}
.chm-17__scrolltip::before{content:"↓";animation:chm-17-b 1.4s infinite}
@keyframes chm-17-b{50%{transform:translateY(5px)}}
.chm-17__block{min-height:360px;display:flex;align-items:center;border-top:1px solid var(--line)}
.chm-17__block h2{font-size:clamp(1.4rem,4vw,2.2rem);font-weight:700;max-width:18ch;color:var(--muted)}
.chm-17__block h2 b{color:var(--fog)}
.chm-17__tag{position:absolute;bottom:18px;left:clamp(18px,4vw,40px);z-index:5;font-family:'Overpass Mono',monospace;font-size:10px;letter-spacing:.3em;color:var(--muted)}

@media (prefers-reduced-motion: reduce){
  .chm-17__header,.chm-17__logo,.chm-17__mk,.chm-17__burger,.chm-17__b,.chm-17__b i,.chm-17__sheet,.chm-17__sheet a,.chm-17__scrim,.chm-17__scroller{transition:none !important;scroll-behavior:auto !important}
  .chm-17__scrolltip::before{animation:none !important}
}
(() => {
  const root = document.querySelector('.chm-17');
  if (!root) return;
  const hd = root.querySelector('#chm-17-hd');
  const scroller = root.querySelector('.chm-17__scroller');
  const btn = root.querySelector('.chm-17__burger');
  const scrim = root.querySelector('.chm-17__scrim');
  scroller.addEventListener('scroll', () => {
    hd.classList.toggle('is-scrolled', scroller.scrollTop > 60);
  }, { passive: true });
  btn.addEventListener('click', () => root.classList.toggle('is-open'));
  scrim.addEventListener('click', () => root.classList.remove('is-open'));
})();

More from 20 CSS Hamburger Menus

CSS Slide Down Dropdown Hamburger MenuMinimalist 3-Line CSS Menu Icon with Hover EffectsHamburger Menu with Morphing Icon AnimationsFull-Screen Overlay Mobile NavigationSlide-out Sidebar / Off-Canvas NavigationResponsive 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)
View the full collection →

Search CodeFronts

Loading…

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