11 CSS Header Designs 02 / 11

CSS Grid Mega Menu Header

A multi-column mega menu built with CSS Grid inside a panel that fades and lifts via opacity/visibility, triggered purely by :hover and :focus-within.

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

The code

<div class="csh-02">
  <div class="csh-02__noise"></div>
  <header class="csh-02__header">
    <div class="csh-02__bar">
      <a href="#" class="csh-02__logo">Mai<em>son</em>.</a>
      <nav class="csh-02__nav">
        <div class="csh-02__item">
          <a href="#">Collections <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M6 9l6 6 6-6"/></svg></a>
          <div class="csh-02__mega">
            <div class="csh-02__col">
              <h4>Apparel</h4>
              <a class="csh-02__link" href="#"><strong>Outerwear</strong><span>Coats · Trench · Shells</span></a>
              <a class="csh-02__link" href="#"><strong>Knitwear</strong><span>Merino · Cashmere</span></a>
              <a class="csh-02__link" href="#"><strong>Tailoring</strong><span>Suits · Blazers</span></a>
            </div>
            <div class="csh-02__col">
              <h4>Accessories</h4>
              <a class="csh-02__link" href="#"><strong>Leather Goods</strong><span>Bags · Wallets</span></a>
              <a class="csh-02__link" href="#"><strong>Eyewear</strong><span>Optical · Sun</span></a>
              <a class="csh-02__link" href="#"><strong>Footwear</strong><span>Boots · Loafers</span></a>
            </div>
            <div class="csh-02__feature">
              <span>// FW 2030</span>
              <h3>The Archive Drop</h3>
              <a href="#">Shop now →</a>
            </div>
          </div>
        </div>
        <div class="csh-02__item">
          <a href="#">Atelier <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M6 9l6 6 6-6"/></svg></a>
          <div class="csh-02__mega">
            <div class="csh-02__col">
              <h4>Services</h4>
              <a class="csh-02__link" href="#"><strong>Made-to-Measure</strong><span>Book a fitting</span></a>
              <a class="csh-02__link" href="#"><strong>Repairs</strong><span>Lifetime care</span></a>
            </div>
            <div class="csh-02__col">
              <h4>Story</h4>
              <a class="csh-02__link" href="#"><strong>Craft</strong><span>Our makers</span></a>
              <a class="csh-02__link" href="#"><strong>Materials</strong><span>Traceable sourcing</span></a>
            </div>
            <div class="csh-02__feature" style="background:linear-gradient(150deg,var(--sage),#65a30d)">
              <span>// VISIT</span>
              <h3>Flagship Tour</h3>
              <a href="#" style="color:var(--sage)">Reserve →</a>
            </div>
          </div>
        </div>
        <div class="csh-02__item"><a href="#" class="csh-02__cta">Account</a></div>
      </nav>
    </div>
  </header>

  <section class="csh-02__hero">
    <div>
      <h1>Hover the<br><em>mega menu.</em></h1>
      <p>CSS Grid · :focus-within · zero javascript</p>
    </div>
  </section>
</div>
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],400;9..144,600;9..144,900&family=DM+Mono:wght@400;500&display=swap');

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

.csh-02{
  --bg:#faf6f0;
  --ink:#1a1410;
  --plum:#6d28d9;
  --rust:#c2410c;
  --sage:#3f6212;
  --card:#fffdf9;
  font-family:'Fraunces',serif;
  background:var(--bg);color:var(--ink);
  min-height:100vh;position:relative;overflow-x:hidden;
}
.csh-02__noise{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.csh-02__header{position:sticky;top:0;z-index:50;background:rgba(250,246,240,.85);backdrop-filter:blur(16px);border-bottom:1px solid rgba(26,20,16,.08)}
.csh-02__bar{display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,56px);height:74px;max-width:1280px;margin:0 auto}
.csh-02__logo{font-weight:900;font-size:1.5rem;letter-spacing:-.03em;text-decoration:none;color:var(--ink);font-variation-settings:'opsz' 144}
.csh-02__logo em{font-style:italic;color:var(--plum)}
.csh-02__nav{display:flex;align-items:stretch;height:74px}
.csh-02__item{position:relative;display:flex;align-items:center}
.csh-02__item>a{display:flex;align-items:center;gap:6px;height:100%;padding:0 20px;text-decoration:none;color:var(--ink);font-weight:600;font-size:1rem;font-family:'DM Mono',monospace;letter-spacing:-.01em}
.csh-02__item>a svg{width:12px;height:12px;transition:transform .35s cubic-bezier(.7,0,.2,1)}
.csh-02__item:hover>a svg,.csh-02__item:focus-within>a svg{transform:rotate(180deg)}
.csh-02__item>a::after{content:'';position:absolute;left:20px;right:20px;bottom:18px;height:2px;background:var(--rust);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.csh-02__item:hover>a::after,.csh-02__item:focus-within>a::after{transform:scaleX(1)}

/* MEGA PANEL — CSS Grid inside a container that fades + lifts via opacity/visibility,
   triggered purely by :hover and :focus-within. No JS. */
.csh-02__mega{
  position:absolute;top:74px;left:50%;transform:translateX(-50%) translateY(14px);
  width:min(880px,92vw);
  background:var(--card);
  border:1px solid rgba(26,20,16,.08);
  border-radius:22px;
  box-shadow:0 40px 80px -30px rgba(26,20,16,.35),0 0 0 1px rgba(255,255,255,.6) inset;
  padding:28px;
  display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .4s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1),visibility .4s;
}
.csh-02__item:hover .csh-02__mega,.csh-02__item:focus-within .csh-02__mega{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.csh-02__col h4{font-family:'DM Mono',monospace;font-size:.66rem;letter-spacing:.25em;text-transform:uppercase;color:var(--rust);padding:10px 14px 8px}
.csh-02__link{display:block;padding:11px 14px;border-radius:12px;text-decoration:none;color:var(--ink);transition:background .25s,transform .25s}
.csh-02__link strong{display:block;font-weight:600;font-size:1.02rem;letter-spacing:-.01em}
.csh-02__link span{font-family:'DM Mono',monospace;font-size:.72rem;color:rgba(26,20,16,.5)}
.csh-02__link:hover{background:rgba(109,40,217,.06);transform:translateX(4px)}
.csh-02__feature{grid-column:span 1;background:linear-gradient(150deg,var(--plum),#9333ea);border-radius:16px;padding:20px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;min-height:180px}
.csh-02__feature span{font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.25em;opacity:.8}
.csh-02__feature h3{font-size:1.5rem;line-height:1.05;font-weight:600;font-style:italic}
.csh-02__feature a{align-self:flex-start;background:#fff;color:var(--plum);font-family:'DM Mono',monospace;font-size:.72rem;font-weight:500;padding:8px 16px;border-radius:30px;text-decoration:none;letter-spacing:.05em}

.csh-02__nav a.csh-02__cta{font-family:'DM Mono',monospace;font-weight:500;font-size:.82rem;background:var(--ink);color:var(--bg);padding:11px 22px;border-radius:30px;text-decoration:none;transition:transform .3s cubic-bezier(.34,1.56,.64,1),color .3s}
.csh-02__nav a.csh-02__cta::after{display:none}
.csh-02__nav a.csh-02__cta:hover{transform:translateY(-2px);color:var(--bg)}

.csh-02__hero{position:relative;z-index:1;min-height:calc(100vh - 74px);display:grid;place-items:center;text-align:center;padding:0 24px}
.csh-02__hero h1{font-size:clamp(2.8rem,10vw,7rem);font-weight:900;line-height:.92;letter-spacing:-.04em;font-variation-settings:'opsz' 144}
.csh-02__hero h1 em{font-style:italic;color:var(--rust)}
.csh-02__hero p{font-family:'DM Mono',monospace;margin-top:22px;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(26,20,16,.5)}

@media (max-width:860px){.csh-02__nav .csh-02__item:not(:last-child){display:none}.csh-02__mega{display:none}}
@media (prefers-reduced-motion: reduce){.csh-02__mega,.csh-02__item>a svg,.csh-02__link,.csh-02__cta{transition:none !important}}

More from 11 CSS Header Designs

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

Search CodeFronts

Loading…

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