header-navbar

Summary

Transparent floating header with a top utility bar (offer text + social icons), a center main menu with multi-column dropdowns, and a right cluster containing search, login link and a primary "Get Started" pill button. Becomes opaque and sticky after a small scroll threshold.

HTML structure (minimal)

<header class="header-bottom__transparent z-index-6 tp-header-height">
  <div class="header-top__area header-top__space tp-header-top-animation">
    <div class="container"><!-- offer text + social --></div>
  </div>
  <div id="header-sticky" class="header-bottom__area header-bottom__transparent">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-2"><a class="header-bottom__logo" href="index.html"><img src="logo-black.png"></a></div>
        <div class="col-6 d-none d-lg-block">
          <nav id="mobile-menu">
            <ul>
              <li><a href="index.html">Home</a><ul class="submenu">…</ul></li>
              <li><a href="#">Pages</a><ul class="submenu">…</ul></li>
              <li><a href="#">Blog</a><ul class="submenu">…</ul></li>
              <li><a href="#">Projects</a><ul class="submenu">…</ul></li>
              <li><a href="contact.html">Contact</a></li>
            </ul>
          </nav>
        </div>
        <div class="col-4">
          <div class="header-bottom__right d-flex justify-content-end">
            <a class="search-open-btn" href="javascript:void(0)">…</a>
            <a class="last-child" href="register.html"><span>Log In</span></a>
            <a class="tp-btn-white tp-btn-hover alt-color-black" href="service-details.html">
              <span class="white-text">Get Started</span><b></b>
            </a>
            <a class="tp-menu-bar d-lg-none" href="javascript:void(0)"><i class="fal fa-bars"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

Key SCSS tokens

.header-bottom__transparent { background: transparent; }
#header-sticky.header-sticky {
  position: fixed; top: 0; left: 0; right: 0;
  background-color: var(--tp-common-white);
  box-shadow: 0px 10px 30px rgba(1, 16, 61, 0.05);
  z-index: 99;
}
.header-bottom__main-menu > nav > ul > li {
  position: relative; display: inline-block; padding: 30px 18px;
  & > a { font-weight: 500; color: var(--tp-common-black); }
  & .submenu {
    position: absolute; top: 100%; left: 0; min-width: 220px;
    background: var(--tp-common-white);
    box-shadow: 0px 30px 60px rgba(1, 16, 61, 0.07);
    border-radius: 8px; padding: 20px 0;
    opacity: 0; visibility: hidden; transform: translateY(20px);
    transition: all .3s ease;
  }
  &:hover .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
}

Animation logic

// Sticky toggle (jQuery, in main.js)
$(window).on('scroll', function () {
  const top = $(window).scrollTop();
  if (top > 80) $('#header-sticky').addClass('header-sticky');
  else $('#header-sticky').removeClass('header-sticky');
});

// Top utility bar fades in 1.05s after load
gsap.set('.tp-header-top-animation', { opacity: 0, y: '20px' });
gsap.to('.tp-header-top-animation', { opacity: 1, y: 0, delay: 1.05 });

Notable details

• The "Get Started" CTA uses a <b> element as a hover-fill mask that sweeps across the button on hover — see tp-btn-hover in _buttons.scss.
• Hamburger and full menu coexist: at <lg the desktop menu hides and the .tp-menu-bar opens the right-side off-canvas drawer.
• The top utility bar reuses .tp-header-top-animation to slide down after the hero animation kicks in, avoiding clutter on initial load.

Use when

• B2B SaaS landings that need a multi-section mega menu.
• Marketing sites with both "Sign in" and a primary CTA in the same row.
• Templates that ship five+ home pages and need shared header chrome.

Caveats

• Mega-menu width is fixed at 220px; long submenu strings will wrap.
• Sticky logic relies on jQuery + window scroll; replace with IntersectionObserver if you remove jQuery.