header-mega-menu

Summary

Sticky header with logo on the left, three mega-menu items (Services, Industries, About) in the middle, and a pill CTA on the right. The header auto-hides on scroll-down and slides back in on scroll-up via a Vamtam framework class toggle. Each mega-menu opens a multi-column dropdown grouped by sub-category.

HTML structure (minimal)

<header class="site-header">
  <div class="container">
    <a class="logo" href="/">AIFusionX</a>
    <nav class="primary-nav">
      <ul>
        <li class="has-mega"><a href="#">Services</a>
          <div class="mega">
            <div class="col">
              <h6>Integrations</h6>
              <a href="#">CRM &amp; Sales</a>
              <a href="#">Ops &amp; Finance</a>
            </div>
            <div class="col">
              <h6>Build</h6>
              <a href="#">Custom Agents</a>
              <a href="#">Internal Tools</a>
            </div>
          </div>
        </li>
        <li class="has-mega"><a href="#">Industries</a><div class="mega">…</div></li>
        <li class="has-mega"><a href="#">About</a><div class="mega">…</div></li>
      </ul>
    </nav>
    <a class="btn btn--pill" href="#contact">Get started</a>
  </div>
</header>

Key SCSS tokens

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
}
.site-header--hidden { transform: translateY(-100%); }
.site-header--shown  { transform: translateY(0); }

.primary-nav .mega {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 32px;
  padding: 32px;
  background: #ffffff;
}
.btn--pill {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border-radius: 60px;
  border: 0.5px solid #000;
  background: #000;
  color: #fff;
}

Animation logic

// Auto-hide on scroll-down, reveal on scroll-up.
let lastY = 0;
const header = document.querySelector('.site-header');
window.addEventListener('scroll', () => {
  const y = window.scrollY;
  const goingDown = y > lastY && y > 80;
  header.classList.toggle('site-header--hidden', goingDown);
  header.classList.toggle('site-header--shown', !goingDown);
  lastY = y;
}, { passive: true });

Notable details

• The mega-menu is a 3-column grid grouped by sub-topic, not a flat list — denser IA without overflow.
• 0.5px border on pill CTA reads as a hairline in screenshots, gives the chrome a print-set feel rather than a UI-kit feel.
• Toggle on scroll direction (not scroll position) means the header is always one upward gesture away.
• All-Instrument-Sans approach extends to the navbar — no separate "navigation font".

Use when

• Long-form editorial pages where a permanently pinned header is visual noise.
• Sites with deeper IA (multiple service / industry verticals) that benefit from a column-grouped mega-menu.
• Brands that want the navbar to feel like a magazine masthead, not a SaaS chrome bar.

Caveats

• The screenshot pipeline cannot capture this component on its own — the live header is sticky-hidden by default. Reference the top of screenshots/full-page.jpeg for the resting state.
• Powered by Elementor Pro Mega Menu + SmartMenus + jQuery Sticky on the live demo — non-trivial to recreate without Elementor; in vanilla you'd reach for SmartMenus or Headless UI's Menu.