20 CSS Hamburger Menus 03 / 20

Full-Screen Overlay Mobile Navigation

Editorial agency aesthetic in warm cream/charcoal/burnt-orange.

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

The code

<div class="chm-03">
  <div class="chm-03__scene">
    <div class="chm-03__bgtype">Aö</div>

    <button class="chm-03__burger" aria-label="Toggle navigation">
      <span class="chm-03__word">Menu</span>
      <span class="chm-03__stack"><i></i><i></i></span>
    </button>

    <div class="chm-03__overlay">
      <div class="chm-03__over-kick">Studio Index — Full Viewport</div>
      <nav>
        <a href="#"><span class="chm-03__num">01</span>Editorial</a>
        <a href="#"><span class="chm-03__num">02</span>Direction</a>
        <a href="#"><span class="chm-03__num">03</span>Objects</a>
        <a href="#"><span class="chm-03__num">04</span>Contact</a>
      </nav>
      <div class="chm-03__over-foot"><a href="#">Lisbon</a><a href="#">[email protected]</a><a href="#">+351 21 000</a></div>
    </div>

    <div class="chm-03__stage">
      <div class="chm-03__hero">
        <div class="chm-03__kick">Creative Direction · 2030</div>
        <h1>Cover the<br><b>whole</b> world.</h1>
      </div>
    </div>
    <div class="chm-03__tag">FULLSCREEN_OVERLAY</div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],300..900&family=Archivo:wght@400;600;800&display=swap');

.chm-03, .chm-03 *, .chm-03 *::before, .chm-03 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.chm-03{
  --cream:#f3ede3;--char:#16130f;--burnt:#d9501e;--olive:#5d6b3f;
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Archivo',sans-serif;background:var(--cream);color:var(--char);
  position:relative;
}
.chm-03__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-03__stage{position:relative;z-index:2;min-height:460px;display:flex;align-items:flex-end;padding:5%}
.chm-03__hero{max-width:900px}
.chm-03__kick{font-size:11px;letter-spacing:.45em;text-transform:uppercase;color:var(--burnt);font-weight:800;margin-bottom:14px}
.chm-03__hero h1{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(2.4rem,9vw,6rem);line-height:.86;letter-spacing:-.02em}
.chm-03__hero h1 b{font-weight:900;font-style:italic}
.chm-03__bgtype{position:absolute;top:-2%;left:-1%;z-index:0;font-family:'Fraunces',serif;font-weight:900;font-size:30vw;color:rgba(22,19,15,0.035);line-height:.8;pointer-events:none;user-select:none}
.chm-03__burger{position:absolute;top:24px;right:28px;z-index:60;display:flex;align-items:center;gap:12px;cursor:pointer;background:none;border:none}
.chm-03__word{font-weight:800;letter-spacing:.2em;font-size:11px;text-transform:uppercase;color:var(--char);transition:color .4s}
.chm-03__stack{width:30px;height:13px;position:relative}
.chm-03__stack i{position:absolute;left:0;width:100%;height:2.5px;background:var(--char);border-radius:3px;transition:transform .55s cubic-bezier(.7,0,.2,1),background .4s,width .4s}
.chm-03__stack i:nth-child(1){top:0}
.chm-03__stack i:nth-child(2){top:10px;width:60%}
.chm-03.is-open .chm-03__stack i:nth-child(1){transform:translateY(5px) rotate(45deg);background:var(--cream)}
.chm-03.is-open .chm-03__stack i:nth-child(2){transform:translateY(-5px) rotate(-45deg);width:100%;background:var(--cream)}
.chm-03.is-open .chm-03__word{color:var(--cream)}
.chm-03__overlay{position:absolute;inset:0;z-index:50;background:var(--char);display:flex;flex-direction:column;justify-content:center;padding:0 8%;
  -webkit-clip-path:inset(0 0 100% 0);clip-path:inset(0 0 100% 0);transition:clip-path .85s cubic-bezier(.76,0,.24,1),-webkit-clip-path .85s cubic-bezier(.76,0,.24,1);pointer-events:none}
.chm-03.is-open .chm-03__overlay{-webkit-clip-path:inset(0 0 0% 0);clip-path:inset(0 0 0% 0);pointer-events:auto}
.chm-03__overlay::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 80% at 80% 30%,rgba(217,80,30,0.22),transparent 60%)}
.chm-03__over-kick{position:relative;font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--burnt);font-weight:800;margin-bottom:30px;opacity:0;transition:.4s .5s}
.chm-03.is-open .chm-03__over-kick{opacity:1}
.chm-03__overlay nav{position:relative}
.chm-03__overlay nav a{display:block;font-family:'Fraunces',serif;font-weight:300;font-size:clamp(2rem,7vw,4.6rem);line-height:1.02;color:var(--cream);text-decoration:none;transition:color .3s,transform .3s;
  opacity:0;transform:translateY(60px) rotate(2deg)}
.chm-03__overlay nav a .chm-03__num{font-family:'Archivo',sans-serif;font-weight:800;font-size:.7rem;vertical-align:top;color:var(--olive);margin-right:14px}
.chm-03.is-open .chm-03__overlay nav a{opacity:1;transform:none}
.chm-03.is-open .chm-03__overlay nav a:nth-child(1){transition:.7s cubic-bezier(.16,1,.3,1) .50s}
.chm-03.is-open .chm-03__overlay nav a:nth-child(2){transition:.7s cubic-bezier(.16,1,.3,1) .58s}
.chm-03.is-open .chm-03__overlay nav a:nth-child(3){transition:.7s cubic-bezier(.16,1,.3,1) .66s}
.chm-03.is-open .chm-03__overlay nav a:nth-child(4){transition:.7s cubic-bezier(.16,1,.3,1) .74s}
.chm-03__overlay nav a:hover{color:var(--burnt);font-style:italic}
.chm-03__over-foot{position:relative;margin-top:30px;display:flex;gap:24px;flex-wrap:wrap;font-size:11px;letter-spacing:.15em;color:rgba(243,237,227,.55);opacity:0;transition:.4s .85s}
.chm-03.is-open .chm-03__over-foot{opacity:1}
.chm-03__over-foot a{color:inherit;text-decoration:none}
.chm-03__over-foot a:hover{color:var(--olive)}
.chm-03__tag{position:absolute;bottom:18px;right:24px;z-index:5;font-size:10px;letter-spacing:.3em;color:rgba(22,19,15,.4);font-weight:600}

@media (prefers-reduced-motion: reduce){
  .chm-03__stack i,.chm-03__overlay,.chm-03__overlay nav a,.chm-03__over-foot,.chm-03__over-kick,.chm-03__word{transition:none !important}
}
(() => {
  const root = document.querySelector('.chm-03');
  if (!root) return;
  const btn = root.querySelector('.chm-03__burger');
  btn.addEventListener('click', () => root.classList.toggle('is-open'));
})();

More from 20 CSS Hamburger Menus

3D 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 AnimationsSlide-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 Menu
View the full collection →

Search CodeFronts

Loading…

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