11 CSS Header Designs 09 / 11

Vertical Sidebar Navigation Header

A persistent left rail using position:fixed, left:0 and height:100vh, with the page content offset cleanly by a matching grid track so nothing overlaps.

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

The code

<div class="csh-09">
  <div class="csh-09__layout">
    <header class="csh-09__side">
      <a href="#" class="csh-09__brand"><span>◑</span>Lumen</a>
      <div class="csh-09__tagline">// portfolio · 2030</div>
      <nav class="csh-09__nav">
        <a href="#" class="is-on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12l9-9 9 9M5 10v10h14V10"/></svg>Home</a>
        <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>Work</a>
        <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></svg>About</a>
        <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16v16H4z"/><path d="M4 9h16M9 9v11"/></svg>Journal</a>
        <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16v12H8l-4 4z"/></svg>Contact</a>
      </nav>
      <div class="csh-09__foot">
        <a href="#" class="csh-09__profile"><span class="csh-09__avatar"></span><span><b>Ada Vesper</b><span>Designer</span></span></a>
      </div>
    </header>

    <main class="csh-09__main">
      <div>
        <h1>Pinned to<br><em>the left.</em></h1>
        <p>position: fixed · height: 100vh · grid offset</p>
      </div>
    </main>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@500;700;800&family=Space+Mono:wght@400;700&display=swap');

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

.csh-09{
  --bg:#16110d;
  --bone:#f5ede1;
  --flame:#ff6b2c;
  --moss:#9ab33d;
  --dim:rgba(245,237,225,.5);
  font-family:'Syne',sans-serif;
  background:var(--bg);color:var(--bone);
  min-height:100vh;position:relative;overflow:hidden;
}
/* Parent uses a grid track: [sidebar] [main]. The fixed sidebar is mirrored by
   a matching column so main content offsets cleanly without overlap. */
.csh-09__layout{display:grid;grid-template-columns:264px 1fr;min-height:100vh}

.csh-09__side{position:fixed;left:0;top:0;height:100vh;width:264px;z-index:50;
  display:flex;flex-direction:column;padding:30px 26px;
  background:linear-gradient(180deg,#1c1610,#15100b);border-right:1px solid rgba(245,237,225,.1)}
.csh-09__brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.4rem;letter-spacing:-.02em;text-decoration:none;color:var(--bone);margin-bottom:8px}
.csh-09__brand span{width:34px;height:34px;border-radius:10px;background:var(--flame);color:#16110d;display:grid;place-items:center;font-weight:800}
.csh-09__tagline{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.25em;text-transform:uppercase;color:var(--dim);margin-bottom:38px;padding-left:2px}

.csh-09__nav{display:flex;flex-direction:column;gap:3px;flex:1}
.csh-09__nav a{position:relative;display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--dim);font-weight:500;font-size:1rem;padding:12px 14px;border-radius:11px;transition:color .25s,background .25s,padding-left .25s}
.csh-09__nav a svg{width:18px;height:18px;flex:0 0 auto}
.csh-09__nav a::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);width:3px;height:60%;background:var(--flame);border-radius:3px;transition:transform .3s cubic-bezier(.7,0,.2,1)}
.csh-09__nav a:hover{color:var(--bone);background:rgba(245,237,225,.04);padding-left:18px}
.csh-09__nav a.is-on{color:var(--bone);background:rgba(255,107,44,.12)}
.csh-09__nav a.is-on::before{transform:translateY(-50%) scaleY(1)}

.csh-09__foot{margin-top:auto;padding-top:22px;border-top:1px solid rgba(245,237,225,.1)}
.csh-09__profile{display:flex;align-items:center;gap:11px;text-decoration:none}
.csh-09__avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--moss),var(--flame));flex:0 0 auto}
.csh-09__profile b{display:block;color:var(--bone);font-size:.9rem;font-weight:700}
.csh-09__profile span{font-family:'Space Mono',monospace;font-size:.66rem;color:var(--dim)}

.csh-09__main{grid-column:2;position:relative;display:grid;place-items:center;text-align:center;padding:0 24px;min-height:100vh}
.csh-09__main::before{content:'';position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:radial-gradient(55% 55% at 70% 30%,rgba(255,107,44,.1),transparent 60%),radial-gradient(45% 45% at 30% 80%,rgba(154,179,61,.08),transparent 60%)}
.csh-09__main h1{position:relative;font-size:clamp(2.4rem,8vw,5.5rem);font-weight:800;line-height:.92;letter-spacing:-.04em}
.csh-09__main h1 em{font-style:normal;color:var(--flame)}
.csh-09__main p{position:relative;font-family:'Space Mono',monospace;margin-top:22px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}

@media (max-width:760px){
  .csh-09__layout{grid-template-columns:1fr}
  .csh-09__side{position:fixed;left:0;right:0;top:auto;bottom:0;height:auto;width:100%;flex-direction:row;align-items:center;padding:12px 16px;border-right:none;border-top:1px solid rgba(245,237,225,.12)}
  .csh-09__brand{margin:0}.csh-09__tagline,.csh-09__foot,.csh-09__nav a span:not(svg){display:none}
  .csh-09__nav{flex-direction:row;justify-content:flex-end;gap:2px}
  .csh-09__nav a{padding:10px}.csh-09__nav a::before{display:none}
  .csh-09__main{grid-column:1;padding-bottom:90px}
}
@media (prefers-reduced-motion: reduce){.csh-09__nav a,.csh-09__nav a::before{transition:none !important}}

More from 11 CSS Header Designs

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

Search CodeFronts

Loading…

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