main-header

Summary

Top navbar with multi-level dropdowns, dual logos (light/dark variants), a Let's Talk pill CTA and an animated hamburger that opens a full-screen mobile menu. A second .sticky-header clone is auto-populated by JS and pinned on scroll past 110 px.

HTML structure (minimal)

<header class="main-header">
  <div class="header-lower">
    <div class="outer-box">
      <div class="logo-box">
        <figure class="light-logo"><a href="/"><img src="logo.png"></a></figure>
        <figure class="dark-logo"><a href="/"><img src="logo-2.png"></a></figure>
      </div>
      <div class="menu-area">
        <nav class="main-menu navbar-expand-md">
          <ul class="navigation">
            <li class="dropdown"><a href="#">Home</a>
              <ul><li><a href="#">UI/UX Designer</a></li></ul>
            </li>
            <li><a href="/contact">Contact</a></li>
          </ul>
        </nav>
      </div>
      <div class="menu-right-content">
        <div class="btn-box"><a href="#"><span>Let's Talk</span></a></div>
        <div class="mobile-nav-toggler">
          <div class="hamburger"><div class="hamburger__container">
            <div class="hamburger__inner"></div><div class="hamburger__hidden"></div>
          </div></div>
        </div>
      </div>
    </div>
  </div>
  <div class="sticky-header"><!-- auto-cloned --></div>
</header>

Key SCSS tokens

.main-header { position: absolute; inset: 0 0 auto 0; z-index: 99; }
.main-header .outer-box { display: flex; align-items: center; justify-content: space-between; padding: 30px 110px; }
.main-header .navigation > li { display: inline-block; padding: 0 20px; }
.main-header .navigation > li > ul { position: absolute; min-width: 220px; opacity: 0; visibility: hidden; transform: translateY(20px); transition: .3s; }
.main-header .navigation > li:hover > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.sticky-header { position: fixed; top: 0; left: 0; right: 0; transform: translateY(-100%); transition: .3s; }
.fixed-header .sticky-header { transform: translateY(0); }
.dark_bg .light-logo { display: none; }
.light_bg .dark-logo { display: none; }

Animation logic

function headerStyle() {
  if ($('.main-header').length) {
    $('.main-header').toggleClass('fixed-header', $(window).scrollTop() >= 110);
  }
}
$(window).on('scroll', headerStyle);

// Clone main menu into sticky and mobile slots
var mobileMenuContent = $('.main-header .menu-area .main-menu').html();
$('.mobile-menu .menu-box .menu-outer').append(mobileMenuContent);
$('.sticky-header .main-menu').append(mobileMenuContent);

Notable details

• The sticky variant is intentionally empty in HTML — JS clones the main menu into it on init, so authors only edit one nav.
• Two logo <figure>s are always rendered; CSS hides the wrong one based on the body class — no layout shift on theme toggle.
• Hamburger button uses a 3-div geometry that morphs to an X via CSS transforms (hamburger.js toggles classes only).

Use when

• Multi-page portfolios that need both deep mega-dropdowns and a hidden mobile drawer.
• Templates where the same nav must reappear stickily on scroll without the author maintaining two copies.

Caveats

• jQuery and Bootstrap-CSS dependencies. Migrating to vanilla JS / Tailwind requires reworking the dropdown reveal too.
• The sticky clone breaks if the original menu mutates after init; re-run the clone after dynamic changes.