site-header-sticky

Summary

A two-row sticky header: a near-black utility bar at the top (phone, promo banner, language / currency / setting selectors) and a white primary nav below it carrying the logo, mega-menu links, search input, wishlist and cart action icons with badges, plus a hamburger sidebar trigger.

HTML structure (minimal)

<header>
  <div class="header">
    <div class="header-top-area grocery__top-header">
      <div class="header-layout-4">
        <div class="header-to-main d-none d-sm-flex">
          <div class="link-text">
            <span><img src="call.png" alt=""></span>
            <a href="tel:+380961381876">+380961381876</a>
          </div>
          <div class="header-top-notice d-none d-lg-block">
            <p>TAKE CARE OF YOUR Health <span class="text-white">25% OFF</span> USE CODE "DOFIX03"</p>
          </div>
          <div class="tp-header-top-menu d-flex align-items-center justify-content-end">
            <div class="header-lang-item header-lang">
              <span class="header-lang-toggle text-white">English</span>
              <ul><li><a href="#">Spanish</a></li><!-- … --></ul>
            </div>
            <div class="header-lang-item tp-header-currency">…</div>
            <div class="header-lang-item tp-header-setting">…</div>
          </div>
        </div>
      </div>
    </div>
    <div class="header-layout-4 header-bottom">
      <div id="header-sticky" class="header-4">
        <div class="mega-menu-wrapper">
          <div class="header-main-4">
            <div class="header-left">
              <div class="header-logo"><a href="#"><img src="logo.svg" alt=""></a></div>
              <div class="mean__menu-wrapper furniture__menu d-none d-lg-block">
                <nav id="mobile-menu">
                  <ul>
                    <li class="has-dropdown"><a href="#">Home</a><ul class="submenu">…</ul></li>
                    <li><a href="#">About</a></li>
                    <!-- … -->
                  </ul>
                </nav>
              </div>
            </div>
            <div class="header-right d-inline-flex align-items-center justify-content-end">
              <div class="header-search d-none d-xxl-block"><form><input type="text" placeholder="Search..."><button>…</button></form></div>
              <div class="header-action d-flex align-items-center ml-30">
                <div class="header-action-item"><a href="#" class="header-action-btn">…heart svg…<span class="header-action-badge bg-furniture">3</span></a></div>
                <div class="header-action-item"><a href="#" class="header-action-btn cartmini-open-btn">…cart svg…<span class="header-action-badge bg-furniture">12</span></a></div>
              </div>
              <div class="header-humbager ml-30">
                <a class="sidebar__toggle" href="javascript:void(0)">
                  <div class="bar-icon-2"><span></span><span></span><span></span></div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

Key SCSS tokens

.header-top-area {
  background-color: #191919;
  color: #fff;
  padding: 8px 0;
}
#header-sticky {
  background-color: #fff;
  transition: all 0.3s ease;
  &.sticky {
    position: fixed;
    inset: 0 0 auto 0;
    box-shadow: 0 4px 14px rgba(0,0,0,.06);
    z-index: 999;
    animation: header-sticky 0.95s ease forwards;
  }
}
.header-action-badge {
  position: absolute;
  top: -6px; right: -8px;
  background: var(--clr-theme-primary);
  color: #fff;
  border-radius: 50%;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  font-size: 11px;
}
.header-lang-item {
  position: relative;
  ul {
    position: absolute;
    top: 100%; right: 0;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
    opacity: 0; visibility: hidden;
    transform: translateY(8px);
    transition: all .3s ease;
  }
  &:hover ul { opacity: 1; visibility: visible; transform: translateY(0); }
}

Animation logic

// Sticky toggle (assets/js/main.js)
$(window).scroll(function () {
  if ($(this).scrollTop() > 250) {
    $("#header-sticky").addClass("sticky");
  } else {
    $("#header-sticky").removeClass("sticky");
  }
});

// Mean Menu drives the mobile drawer
$("#mobile-menu").meanmenu({
  meanMenuContainer: ".mobile-menu",
  meanScreenWidth: "991",
  meanExpand: ['<i class="fal fa-plus"></i>'],
});

// Sidebar toggle
$(".sidebar__toggle").on("click", function () {
  $(".offcanvas__info").addClass("info-open");
  $(".offcanvas__overlay").addClass("overlay-open");
});

Notable details

• The sticky behaviour fires only after 250px of scroll — gentler than an always-fixed header and avoids covering the hero immediately.
• Cart and wishlist counters are absolutely positioned bronze badges over inline SVG icons, keeping perfect alignment regardless of icon size.
• Language / currency / setting are pure CSS hover dropdowns (no JS), with a translateY transition for a soft reveal.

Use when

• E-commerce stores that need a multi-purpose header with utility bar, search, account and cart actions.
• Multi-language storefronts that want quick switchers in the top bar.
• Templates where the same header serves desktop nav and a mobile off-canvas drawer.

Caveats

• Mean Menu auto-mirrors the desktop nav into a mobile drawer; if you change #mobile-menu markup, you must reinit Mean Menu.
• Hover dropdowns aren't keyboard-accessible by default — add :focus-within or wire up click toggles for production.