11 CSS Header Designs 03 / 11

Flexbox 3-Column Navbar Header

The classic performance-first blueprint: logo left, centred navigation, CTA plus search right — held together by display:flex and justify-content:space-between.

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

The code

<div class="csh-03">
  <div class="csh-03__beam"></div>
  <header class="csh-03__header">
    <div class="csh-03__bar">
      <div class="csh-03__left">
        <span class="csh-03__logo">F</span>
        <span class="csh-03__name">Flux<b>FLEXBOX</b></span>
      </div>
      <nav class="csh-03__center">
        <a href="#" class="is-on">Platform</a>
        <a href="#">Pricing</a>
        <a href="#">Docs</a>
        <a href="#">Changelog</a>
        <a href="#">Blog</a>
      </nav>
      <div class="csh-03__right">
        <button class="csh-03__icon" aria-label="Search"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></svg></button>
        <a href="#" class="csh-03__cta">Get started</a>
      </div>
    </div>
  </header>

  <section class="csh-03__hero">
    <div class="csh-03__tagline">display: flex · space-between</div>
    <h1>Three columns,<br><em>perfectly aligned.</em></h1>
    <p>The fastest-loading blueprint — logo, centred nav, and a call-to-action, balanced by flexbox alone.</p>
    <div class="csh-03__specs">
      <div class="csh-03__spec"><b>0kb</b>JS for layout</div>
      <div class="csh-03__spec"><b>100</b>Lighthouse</div>
      <div class="csh-03__spec"><b>1</b>flex container</div>
    </div>
  </section>
</div>
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

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

.csh-03{
  --bg:#0a0e0d;
  --panel:#0f1513;
  --mint:#4ade80;
  --ice:#e6fff4;
  --amber:#fbbf24;
  font-family:'Sora',sans-serif;
  background:
    radial-gradient(70% 50% at 50% -10%,rgba(74,222,128,.1),transparent 60%),
    var(--bg);
  color:var(--ice);
  min-height:100vh;position:relative;overflow-x:hidden;
}
.csh-03__beam{position:absolute;top:0;left:50%;transform:translateX(-50%);width:1px;height:100%;
  background:linear-gradient(180deg,rgba(74,222,128,.4),transparent 40%);opacity:.5;z-index:0}

.csh-03__header{position:sticky;top:0;z-index:50;padding:16px clamp(16px,4vw,40px)}
/* THREE-COLUMN FLEX: logo left · nav centred · actions right.
   space-between handles outer alignment, the centre column flexes to fill. */
.csh-03__bar{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1240px;margin:0 auto;
  background:rgba(15,21,19,.7);
  backdrop-filter:blur(14px);
  border:1px solid rgba(74,222,128,.14);
  border-radius:18px;
  padding:10px 12px 10px 18px;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.6);
}
.csh-03__left{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.csh-03__logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--mint),#22c55e);display:grid;place-items:center;color:#04150c;font-weight:800;font-size:1rem}
.csh-03__name{font-weight:700;font-size:1.1rem;letter-spacing:-.02em}
.csh-03__name b{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:.6rem;color:var(--mint);display:block;letter-spacing:.18em;margin-top:-2px}

.csh-03__center{display:flex;gap:4px;flex:1 1 auto;justify-content:center}
.csh-03__center a{position:relative;text-decoration:none;color:rgba(230,255,244,.7);font-size:.92rem;font-weight:500;padding:9px 16px;border-radius:10px;transition:color .3s,background .3s}
.csh-03__center a:hover{color:var(--ice);background:rgba(74,222,128,.08)}
.csh-03__center a.is-on{color:var(--ice);background:rgba(74,222,128,.12)}

.csh-03__right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.csh-03__icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:rgba(230,255,244,.05);border:1px solid rgba(230,255,244,.1);color:var(--ice);cursor:pointer;transition:transform .3s cubic-bezier(.34,1.56,.64,1),border-color .3s}
.csh-03__icon:hover{transform:translateY(-2px);border-color:var(--mint)}
.csh-03__icon svg{width:18px;height:18px}
.csh-03__cta{font-family:'IBM Plex Mono',monospace;font-size:.78rem;font-weight:500;letter-spacing:.04em;background:var(--mint);color:#04150c;padding:11px 20px;border-radius:11px;text-decoration:none;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.csh-03__cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px -6px rgba(74,222,128,.6)}

.csh-03__hero{position:relative;z-index:1;min-height:calc(100vh - 80px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px}
.csh-03__tagline{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;color:var(--mint);margin-bottom:26px;padding:7px 16px;border:1px solid rgba(74,222,128,.25);border-radius:30px}
.csh-03__hero h1{font-size:clamp(2.6rem,9vw,6rem);font-weight:800;line-height:.95;letter-spacing:-.04em}
.csh-03__hero h1 em{font-style:normal;background:linear-gradient(120deg,var(--mint),var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.csh-03__hero p{font-family:'IBM Plex Mono',monospace;margin-top:24px;font-size:.8rem;letter-spacing:.15em;color:rgba(230,255,244,.5);max-width:46ch}
.csh-03__specs{display:flex;gap:28px;margin-top:44px;flex-wrap:wrap;justify-content:center}
.csh-03__spec{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:rgba(230,255,244,.55)}
.csh-03__spec b{display:block;font-family:'Sora',sans-serif;font-size:1.5rem;color:var(--ice);font-weight:700}

@media (max-width:760px){.csh-03__center{display:none}.csh-03__name b{display:none}}
@media (prefers-reduced-motion: reduce){.csh-03__icon,.csh-03__cta,.csh-03__center a{transition:none !important}}
(() => {
  const root = document.querySelector('.csh-03');
  if (!root) return;
  const links = root.querySelectorAll('.csh-03__center a');
  links.forEach(a => a.addEventListener('click', (e) => {
    e.preventDefault();
    links.forEach(l => l.classList.remove('is-on'));
    a.classList.add('is-on');
  }));
  const icon = root.querySelector('.csh-03__icon');
  if (icon) icon.addEventListener('click', () => {
    icon.style.transform = 'translateY(0) scale(.92)';
    setTimeout(() => { icon.style.transform = ''; }, 150);
  });
})();

More from 11 CSS Header Designs

Header with Announcement BarTwo-Tier Double-Decker HeaderAnimated Link Hover Effects HeaderVertical Sidebar Navigation HeaderMulti-Level Dropdown Menu HeaderShrinking Header on ScrollPure CSS Fixed Navigation (Sticky Header)CSS Grid Mega Menu HeaderFull-Screen Overlay Hamburger HeaderGlassmorphism Transparent Header
View the full collection →

Search CodeFronts

Loading…

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