11 CSS Header Designs 07 / 11

Two-Tier Double-Decker Header

A double-decker layout: a dark utility bar (support, docs, login, language/currency) stacked directly above a larger primary navigation row, grouped inside a single <header> via CSS Grid.

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

The code

<div class="csh-07">
  <header class="csh-07__header">
    <div class="csh-07__utility">
      <div class="csh-07__utility-inner">
        <div class="csh-07__utility-left">
          <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 5h18M3 12h18M3 19h18"/></svg>Enterprise portal</span>
          <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>24/7 support</span>
        </div>
        <div class="csh-07__utility-right">
          <a href="#">Support</a>
          <a href="#">Docs</a>
          <a href="#">Login</a>
          <a href="#" class="csh-07__lang"><b></b>EN / USD</a>
        </div>
      </div>
    </div>
    <div class="csh-07__primary">
      <a href="#" class="csh-07__logo"><span>D</span>Decker</a>
      <nav class="csh-07__nav">
        <a href="#">Products</a>
        <a href="#">Solutions</a>
        <a href="#">Industries</a>
        <a href="#">Resources</a>
        <a href="#">Company</a>
      </nav>
      <label class="csh-07__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>
        Search…
      </label>
    </div>
  </header>

  <section class="csh-07__hero">
    <div class="csh-07__rule"></div>
    <div>
      <h1>Two tiers,<br><em>one header.</em></h1>
      <p>Utility bar + primary nav · collapses on mobile</p>
    </div>
  </section>
</div>
@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400;500;700&family=Spline+Sans+Mono:wght@400;500&display=swap');

.csh-07, .csh-07 *, .csh-07 *::before, .csh-07 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.csh-07 ::selection{background:var(--cobalt);color:#fff}
.csh-07 ::-moz-selection{background:var(--cobalt);color:#fff}

.csh-07{
  --bg:#f0f2f7;
  --ink:#10141f;
  --cobalt:#1f3df0;
  --steel:#5b6478;
  --line:rgba(16,20,31,.1);
  font-family:'Familjen Grotesk',sans-serif;
  background:var(--bg);color:var(--ink);
  min-height:100vh;position:relative;overflow-x:hidden;
}

/* ONE <header> parent, TWO stacked container rows (utility + primary).
   Grid handles the vertical stack; the top tier collapses on mobile. */
.csh-07__header{position:sticky;top:0;z-index:50;display:grid;grid-template-rows:auto auto;
  background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 0 var(--line)}

.csh-07__utility{background:var(--ink);color:rgba(255,255,255,.78)}
.csh-07__utility-inner{max-width:1280px;margin:0 auto;height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,40px);font-family:'Spline Sans Mono',monospace;font-size:.72rem;letter-spacing:.02em}
.csh-07__utility-left{display:flex;gap:18px;align-items:center}
.csh-07__utility-left span{display:flex;align-items:center;gap:6px}
.csh-07__utility-left svg{width:12px;height:12px;opacity:.7}
.csh-07__utility-right{display:flex;gap:4px;align-items:center}
.csh-07__utility-right a{color:rgba(255,255,255,.78);text-decoration:none;padding:5px 10px;border-radius:6px;transition:color .25s,background .25s}
.csh-07__utility-right a:hover{color:#fff;background:rgba(255,255,255,.1)}
.csh-07__lang{display:flex;align-items:center;gap:5px;color:var(--cobalt);font-weight:500}
.csh-07__lang b{width:5px;height:5px;border-radius:50%;background:var(--cobalt)}

.csh-07__primary{max-width:1280px;margin:0 auto;width:100%;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,40px)}
.csh-07__logo{display:flex;align-items:center;gap:11px;font-weight:700;font-size:1.5rem;letter-spacing:-.03em;text-decoration:none;color:var(--ink)}
.csh-07__logo span{width:34px;height:34px;border-radius:9px;background:var(--cobalt);color:#fff;display:grid;place-items:center;font-size:1rem;font-weight:700}
.csh-07__nav{display:flex;gap:2px;align-items:center}
.csh-07__nav>a{position:relative;text-decoration:none;color:var(--ink);font-weight:500;font-size:.96rem;padding:10px 16px;border-radius:9px;transition:background .25s}
.csh-07__nav>a:hover{background:rgba(31,61,240,.07)}
.csh-07__nav>a::after{content:'';position:absolute;left:16px;right:16px;bottom:5px;height:2px;background:var(--cobalt);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.7,0,.2,1)}
.csh-07__nav>a:hover::after{transform:scaleX(1)}
.csh-07__search{display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--line);border-radius:30px;padding:9px 16px;color:var(--steel);font-family:'Spline Sans Mono',monospace;font-size:.78rem;min-width:200px;cursor:text;transition:border-color .25s}
.csh-07__search:hover{border-color:var(--cobalt)}
.csh-07__search svg{width:15px;height:15px}

.csh-07__hero{position:relative;z-index:1;min-height:calc(100vh - 108px);display:grid;place-items:center;text-align:center;padding:0 24px}
.csh-07__hero h1{font-size:clamp(2.6rem,9vw,6rem);font-weight:700;line-height:.94;letter-spacing:-.04em}
.csh-07__hero h1 em{font-style:normal;color:var(--cobalt)}
.csh-07__hero p{font-family:'Spline Sans Mono',monospace;margin-top:22px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--steel)}
.csh-07__rule{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:80px 100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,black 30%,black 70%,transparent);mask-image:linear-gradient(90deg,transparent,black 30%,black 70%,transparent)}

@media (max-width:820px){
  .csh-07__utility{display:none}      /* top tier collapses to save space */
  .csh-07__search{display:none}
  .csh-07__nav>a:nth-child(n+4){display:none}
}
@media (prefers-reduced-motion: reduce){.csh-07__nav>a,.csh-07__nav>a::after,.csh-07__search,.csh-07__utility-right a{transition:none !important}}

More from 11 CSS Header Designs

Full-Screen Overlay Hamburger HeaderGlassmorphism Transparent HeaderHeader with Announcement BarAnimated Link Hover Effects HeaderVertical Sidebar Navigation HeaderMulti-Level Dropdown Menu HeaderShrinking Header on ScrollFlexbox 3-Column Navbar HeaderPure CSS Fixed Navigation (Sticky Header)CSS Grid Mega Menu Header
View the full collection →

Search CodeFronts

Loading…

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