11 CSS Header Designs 04 / 11

Full-Screen Overlay Hamburger Header

A full-viewport overlay opened with the checkbox hack (<input type=checkbox> + :checked + sibling selectors) — no JavaScript at all.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="csh-04">
  <div class="csh-04__aura"></div>

  <input type="checkbox" id="csh-04-toggle" class="csh-04__toggle">
  <header class="csh-04__header">
    <a href="#" class="csh-04__logo">Over<em>lay</em>°</a>
    <label class="csh-04__trigger" for="csh-04-toggle" aria-label="Toggle menu">
      <span class="csh-04__bars"><span></span><span></span><span></span></span>
    </label>
  </header>

  <nav class="csh-04__overlay">
    <div class="csh-04__eyebrow">Checkbox hack · :checked · no JS</div>
    <ul class="csh-04__menu">
      <li><a href="#"><span class="csh-04__num">01</span>Home</a></li>
      <li><a href="#"><span class="csh-04__num">02</span>Projects</a></li>
      <li><a href="#"><span class="csh-04__num">03</span>About</a></li>
      <li><a href="#"><span class="csh-04__num">04</span>Lab</a></li>
      <li><a href="#"><span class="csh-04__num">05</span>Contact</a></li>
    </ul>
    <div class="csh-04__foot"><a href="#">Instagram</a><a href="#">Dribbble</a><a href="#">[email protected]</a></div>
  </nav>

  <section class="csh-04__hero">
    <div>
      <h1>Tap the icon.<br><em>Full screen.</em></h1>
      <p>The checkbox hack — zero javascript</p>
    </div>
  </section>
</div>
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,[email protected],400..800&family=Azeret+Mono:wght@400;500&display=swap');

.csh-04, .csh-04 *, .csh-04 *::before, .csh-04 *::after { box-sizing: border-box; margin: 0; padding: 0; }

.csh-04{
  --ink:#120c1a;
  --paper:#f7f0ff;
  --violet:#a855f7;
  --pink:#f472b6;
  --cyan:#22d3ee;
  font-family:'Bricolage Grotesque',sans-serif;
  background:var(--ink);color:var(--paper);
  min-height:100vh;position:relative;overflow:hidden;
}
.csh-04__aura{position:absolute;inset:-20%;z-index:0;filter:blur(80px);opacity:.5;
  background:radial-gradient(40% 40% at 25% 30%,var(--violet),transparent 70%),radial-gradient(45% 45% at 78% 70%,var(--pink),transparent 70%),radial-gradient(35% 35% at 60% 25%,var(--cyan),transparent 70%);
  animation:csh-04-drift 18s ease-in-out infinite alternate}
@keyframes csh-04-drift{to{transform:translate(3%,-4%) scale(1.1)}}

.csh-04__header{position:relative;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:22px clamp(20px,5vw,48px)}
.csh-04__logo{font-weight:800;font-size:1.4rem;letter-spacing:-.03em;text-decoration:none;color:var(--paper);position:relative;z-index:60}
.csh-04__logo em{font-style:normal;color:var(--cyan)}

/* CHECKBOX HACK: hidden input + label trigger + :checked sibling selector
   toggle a full-viewport overlay — entirely without JavaScript. */
.csh-04__toggle{position:absolute;opacity:0;pointer-events:none}
.csh-04__trigger{position:relative;z-index:60;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(247,240,255,.06);border:1px solid rgba(247,240,255,.16);backdrop-filter:blur(12px);
  transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .4s}
.csh-04__trigger:hover{transform:scale(1.06);border-color:var(--violet)}
.csh-04__bars{width:24px;height:14px;position:relative;display:block}
.csh-04__bars span{position:absolute;left:0;height:2px;width:100%;background:var(--paper);border-radius:2px;transition:transform .5s cubic-bezier(.7,0,.2,1),opacity .35s,background .4s}
.csh-04__bars span:nth-child(1){top:0}
.csh-04__bars span:nth-child(2){top:6px}
.csh-04__bars span:nth-child(3){top:12px}
.csh-04__toggle:checked ~ .csh-04__header .csh-04__bars span:nth-child(1){transform:translateY(6px) rotate(45deg);background:var(--cyan)}
.csh-04__toggle:checked ~ .csh-04__header .csh-04__bars span:nth-child(2){opacity:0}
.csh-04__toggle:checked ~ .csh-04__header .csh-04__bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg);background:var(--cyan)}

.csh-04__overlay{
  position:absolute;inset:0;z-index:50;
  display:flex;flex-direction:column;justify-content:center;padding:0 clamp(24px,9vw,120px);
  background:rgba(18,12,26,.78);backdrop-filter:blur(28px) saturate(150%);
  -webkit-clip-path:circle(0% at calc(100% - 48px) 50px);clip-path:circle(0% at calc(100% - 48px) 50px);
  transition:clip-path .8s cubic-bezier(.76,0,.24,1),-webkit-clip-path .8s cubic-bezier(.76,0,.24,1);
  pointer-events:none}
.csh-04__toggle:checked ~ .csh-04__overlay{-webkit-clip-path:circle(170% at calc(100% - 48px) 50px);clip-path:circle(170% at calc(100% - 48px) 50px);pointer-events:auto}
.csh-04__eyebrow{font-family:'Azeret Mono',monospace;font-size:11px;letter-spacing:.5em;text-transform:uppercase;color:var(--cyan);margin-bottom:28px;opacity:0;transition:opacity .4s}
.csh-04__toggle:checked ~ .csh-04__overlay .csh-04__eyebrow{opacity:1;transition-delay:.45s}
.csh-04__menu{list-style:none}
.csh-04__menu li{overflow:hidden}
.csh-04__menu a{font-size:clamp(2rem,9vw,4.5rem);font-weight:700;line-height:1.02;letter-spacing:-.03em;color:var(--paper);text-decoration:none;display:inline-block;transform:translateY(120%);transition:transform .7s cubic-bezier(.16,1,.3,1),color .3s}
.csh-04__menu a .csh-04__num{font-family:'Azeret Mono',monospace;font-size:.7rem;vertical-align:super;color:var(--pink);margin-right:.5em;font-weight:500}
.csh-04__menu a:hover{color:var(--violet)}
.csh-04__toggle:checked ~ .csh-04__overlay .csh-04__menu li:nth-child(1) a{transform:translateY(0);transition-delay:.42s}
.csh-04__toggle:checked ~ .csh-04__overlay .csh-04__menu li:nth-child(2) a{transform:translateY(0);transition-delay:.5s}
.csh-04__toggle:checked ~ .csh-04__overlay .csh-04__menu li:nth-child(3) a{transform:translateY(0);transition-delay:.58s}
.csh-04__toggle:checked ~ .csh-04__overlay .csh-04__menu li:nth-child(4) a{transform:translateY(0);transition-delay:.66s}
.csh-04__toggle:checked ~ .csh-04__overlay .csh-04__menu li:nth-child(5) a{transform:translateY(0);transition-delay:.74s}
.csh-04__foot{margin-top:38px;font-family:'Azeret Mono',monospace;font-size:11px;color:rgba(247,240,255,.5);display:flex;gap:20px;flex-wrap:wrap;opacity:0;transition:opacity .4s}
.csh-04__toggle:checked ~ .csh-04__overlay .csh-04__foot{opacity:1;transition-delay:.85s}
.csh-04__foot a{color:inherit;text-decoration:none}
.csh-04__foot a:hover{color:var(--cyan)}

.csh-04__hero{position:relative;z-index:10;min-height:calc(100vh - 100px);display:grid;place-items:center;text-align:center;padding:0 24px;pointer-events:none}
.csh-04__hero h1{font-size:clamp(2.4rem,9vw,5.5rem);font-weight:800;letter-spacing:-.04em;line-height:.92}
.csh-04__hero h1 em{font-style:normal;color:var(--pink)}
.csh-04__hero p{font-family:'Azeret Mono',monospace;margin-top:20px;font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:rgba(247,240,255,.55)}

@media (prefers-reduced-motion: reduce){
  .csh-04__aura{animation:none !important}
  .csh-04__trigger,.csh-04__bars span,.csh-04__overlay,.csh-04__eyebrow,.csh-04__menu a,.csh-04__foot{transition:none !important}
}

More from 11 CSS Header Designs

CSS Grid Mega Menu HeaderGlassmorphism Transparent HeaderHeader with Announcement BarTwo-Tier Double-Decker HeaderAnimated Link Hover Effects HeaderVertical Sidebar Navigation HeaderMulti-Level Dropdown Menu HeaderShrinking Header on ScrollFlexbox 3-Column Navbar HeaderPure CSS Fixed Navigation (Sticky Header)
View the full collection →

Search CodeFronts

Loading…

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