11 CSS Header Designs 01 / 11

Pure CSS Fixed Navigation (Sticky Header)

A semantic <header> that locks to the top with position:sticky and frosts over on scroll — driven by a scroll-linked CSS animation timeline, not a JS scroll listener, so Core Web Vitals stay clean.

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

The code

<div class="csh-01">
  <div class="csh-01__scroll">
    <header class="csh-01__header">
      <a href="#" class="csh-01__logo"><span class="csh-01__mark">◆</span>Vertex<b>STICKY</b></a>
      <nav class="csh-01__nav">
        <a href="#">Work</a>
        <a href="#">Studio</a>
        <a href="#">Process</a>
        <a href="#">Journal</a>
        <a href="#" class="csh-01__cta">Start →</a>
      </nav>
    </header>

    <section class="csh-01__hero">
      <div class="csh-01__eyebrow">position: sticky · top: 0</div>
      <h1>Locked to the<br><em>viewport.</em></h1>
      <p>SCROLL TO WATCH THE BAR FROST OVER — ZERO JS LISTENERS</p>
      <div class="csh-01__scrollhint">↓ SCROLL ↓</div>
    </section>

    <section class="csh-01__content">
      <div class="csh-01__block"><span>01 / CORE WEB VITALS</span><h2>No scroll handlers, no jank</h2><p>The solidify effect rides a scroll-driven CSS animation timeline instead of a JavaScript scroll listener — so the main thread stays free and Cumulative Layout Shift stays at zero.</p></div>
      <div class="csh-01__block"><span>02 / Z-INDEX STACKING</span><h2>A clean stacking context</h2><p>The header owns an isolated z-index layer above the scroll content, so dropdowns, hero gradients, and grid overlays never fight for paint order.</p></div>
      <div class="csh-01__block"><span>03 / SEMANTICS</span><h2>Real &lt;header&gt; &amp; &lt;nav&gt;</h2><p>Semantic landmarks keep the bar accessible to screen readers and assistive tech while the sticky positioning is handled entirely in CSS.</p></div>
      <div class="csh-01__block"><span>04 / RESPONSIVE</span><h2>Graceful on every width</h2><p>Below the mobile breakpoint the link cluster collapses to the primary call-to-action, keeping the bar tidy without a single media-query hack.</p></div>
    </section>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Clash+Display:wght@400;600;700&family=Space+Mono:wght@400;700&display=swap');
@import url('https://fonts.cdnfonts.com/css/clash-display');

.csh-01, .csh-01 *, .csh-01 *::before, .csh-01 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.csh-01 ::selection{background:var(--lime);color:var(--ink)}
.csh-01 ::-moz-selection{background:var(--lime);color:var(--ink)}

.csh-01 {
  --ink:#0b0d12;
  --paper:#f3efe6;
  --lime:#c8ff00;
  --coral:#ff5436;
  --glass:rgba(243,239,230,0.05);
  font-family:'Clash Display','Space Mono',sans-serif;
  background:var(--ink);
  color:var(--paper);
  min-height:100vh;
  position:relative;
}
/* scroll-snap container drives a PURE-CSS background swap via the sticky header's
   own scroll position — no JS scroll listeners. The sentinel + container query
   pattern keeps Core Web Vitals clean. */
.csh-01__scroll{height:100vh;overflow-y:scroll;scroll-behavior:smooth;position:relative}
.csh-01__scroll::-webkit-scrollbar{width:0}

.csh-01__header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(20px,5vw,56px);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .5s cubic-bezier(.16,1,.3,1),backdrop-filter .5s,padding .5s,border-color .5s;
}
/* The sentinel sits flush under the header. Once it scrolls out of view the
   header "sticks" — we detect the transition with an animation-timeline-free
   trick: the header background fades in as the page-top gradient scrolls away
   beneath the translucent bar, reading as a frosted solidify. */
.csh-01__scroll{animation:csh-01-solidify linear;animation-timeline:scroll(self);}
@keyframes csh-01-solidify{
  0%,4%{--bgop:0;--blur:0px;--pad:20px}
  9%,100%{--bgop:.72;--blur:18px;--pad:12px}
}
.csh-01__header{
  background:rgba(11,13,18,var(--bgop,0));
  backdrop-filter:blur(var(--blur,0px)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--blur,0px)) saturate(140%);
  padding-top:var(--pad,20px);padding-bottom:var(--pad,20px);
  border-bottom-color:rgba(243,239,230,calc(var(--bgop,0) * .16));
}
.csh-01__logo{display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.35rem;letter-spacing:-.02em;text-decoration:none;color:var(--paper)}
.csh-01__mark{width:34px;height:34px;border-radius:10px;background:var(--lime);display:grid;place-items:center;color:var(--ink);font-weight:700;
  box-shadow:0 0 0 0 rgba(200,255,0,.5);animation:csh-01-pulse 3s ease-in-out infinite}
@keyframes csh-01-pulse{50%{box-shadow:0 0 0 8px rgba(200,255,0,0)}}
.csh-01__logo b{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.3em;color:var(--lime);align-self:flex-start;margin-top:2px}
.csh-01__nav{display:flex;gap:6px;align-items:center}
.csh-01__nav a{position:relative;text-decoration:none;color:rgba(243,239,230,.78);font-size:.95rem;font-weight:500;padding:8px 14px;border-radius:8px;transition:color .3s,background .3s}
.csh-01__nav a::after{content:'';position:absolute;left:14px;right:14px;bottom:4px;height:1.5px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.7,0,.2,1)}
.csh-01__nav a:hover{color:var(--paper)}
.csh-01__nav a:hover::after{transform:scaleX(1)}
.csh-01__nav a.csh-01__cta{font-family:'Space Mono',monospace;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;background:var(--paper);color:var(--ink);padding:11px 20px;border-radius:30px;text-decoration:none;font-weight:700;transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .3s,color .3s}
.csh-01__nav a.csh-01__cta::after{display:none}
.csh-01__nav a.csh-01__cta:hover{transform:translateY(-2px);background:var(--lime);color:var(--ink)}

.csh-01__hero{min-height:100vh;display:grid;place-items:center;text-align:center;padding:0 24px;position:relative;
  background:
    radial-gradient(60% 70% at 50% 0%,rgba(200,255,0,.12),transparent 60%),
    radial-gradient(50% 50% at 85% 90%,rgba(255,84,54,.14),transparent 60%),
    var(--ink);}
.csh-01__hero::before{content:'';position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(243,239,230,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(243,239,230,.04) 1px,transparent 1px);
  background-size:60px 60px;-webkit-mask-image:radial-gradient(circle at 50% 40%,black,transparent 75%);mask-image:radial-gradient(circle at 50% 40%,black,transparent 75%)}
.csh-01__eyebrow{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.45em;text-transform:uppercase;color:var(--lime);margin-bottom:24px;position:relative}
.csh-01__hero h1{font-size:clamp(2.6rem,9vw,6.5rem);font-weight:700;line-height:.92;letter-spacing:-.04em;position:relative}
.csh-01__hero h1 em{font-style:normal;color:var(--coral)}
.csh-01__hero p{font-family:'Space Mono',monospace;margin-top:24px;font-size:11px;letter-spacing:.2em;color:rgba(243,239,230,.5);position:relative}
.csh-01__scrollhint{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.3em;color:rgba(243,239,230,.4);animation:csh-01-bob 2s ease-in-out infinite}
@keyframes csh-01-bob{50%{transform:translateX(-50%) translateY(8px)}}

.csh-01__content{padding:8vh clamp(24px,8vw,120px);max-width:1100px;margin:0 auto;display:grid;gap:48px}
.csh-01__block{border-left:2px solid var(--lime);padding-left:28px}
.csh-01__block span{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.3em;color:var(--coral)}
.csh-01__block h2{font-size:clamp(1.6rem,4vw,2.8rem);font-weight:600;letter-spacing:-.02em;margin:10px 0 12px}
.csh-01__block p{color:rgba(243,239,230,.62);line-height:1.7;max-width:60ch;font-family:'Space Mono',monospace;font-size:.9rem}

@media (max-width:680px){.csh-01__nav a:not(.csh-01__cta){display:none}}
@media (prefers-reduced-motion: reduce){
  .csh-01__scroll{animation:none !important}
  .csh-01__header{background:rgba(11,13,18,.72);backdrop-filter:blur(18px)}
  .csh-01__mark,.csh-01__scrollhint{animation:none !important}
}

More from 11 CSS Header Designs

CSS Grid Mega Menu HeaderFull-Screen Overlay Hamburger 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 Header
View the full collection →

Search CodeFronts

Loading…

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