header-navbar

Summary

Two-row main header with logo, multi-level dropdown navigation, phone number CTA, and a gradient "Book A Visit" button. A duplicate sticky-header copy is appended off-canvas and slides in via fadeInDown once the user scrolls past 150px.

HTML structure (minimal)

<header class="main-header">
  <div class="header-lower">
    <div class="outer-container">
      <div class="outer-box">
        <div class="left-column">
          <figure class="logo-box"><a href="index.html"><img src="logo.png" alt=""></a></figure>
          <nav class="main-menu">
            <ul class="navigation">
              <li class="current dropdown"><a href="#">Home</a>
                <ul>
                  <li><a href="index.html">Main Home</a></li>
                  <li><a href="index-2.html">Marketing Agency</a></li>
                </ul>
              </li>
              <li><a href="about.html">About Us</a></li>
            </ul>
          </nav>
        </div>
        <div class="menu-right-content">
          <div class="support-box"><a href="tel:..."><i class="icon-1"></i> <span>(239)-543-217-0108</span></a></div>
          <div class="btn-box"><a href="index.html" class="theme-btn btn-one"><span class="text">Book A Visit</span></a></div>
        </div>
      </div>
    </div>
  </div>

  <div class="sticky-header">
    <div class="outer-container">
      <nav class="main-menu"></nav>
    </div>
  </div>
</header>

Key SCSS tokens

.main-header { position: relative; z-index: 999; transition: all 500ms ease; }

.sticky-header {
  position: fixed; top: 0; left: 0; width: 100%;
  opacity: 0; visibility: hidden; z-index: 0;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  transition: all 500ms ease;
}

.fixed-header .sticky-header {
  z-index: 999; opacity: 1; visibility: visible;
  animation: fadeInDown 500ms linear 1;
}

Animation logic

function headerStyle() {
  if ($('.main-header').length) {
    var windowpos = $(window).scrollTop();
    var siteHeader = $('.main-header');
    if (windowpos >= 150) siteHeader.addClass('fixed-header');
    else                  siteHeader.removeClass('fixed-header');
  }
}
$(window).on('scroll', headerStyle);

// Sticky-header reuses the same menu HTML by cloning it on init.
var mobileMenuContent = $('.main-header .menu-area .main-menu').html();
$('.sticky-header .main-menu').append(mobileMenuContent);
$('.mobile-menu .menu-box .menu-outer').append(mobileMenuContent);

Notable details

• The sticky variant is a separate .sticky-header element rather than sticky positioning, so the original header can stay relative and avoid shadow/layout shift.
• Dropdown carets are injected at runtime via $('.main-header .navigation li.dropdown').append('<div class="dropdown-btn">…</div>') so the source HTML stays clean.
• Mobile menu is a true off-canvas overlay populated from the same source HTML — there is one source of truth for nav links.

Use when

• Marketing sites that want a tall hero-friendly header on top of the page but a slim one once the user starts reading.
• Multi-page templates where the same nav has to work in 3 places (desktop, sticky, mobile drawer).

Caveats

• The 150px scroll threshold is hard-coded.
• Cloning the menu means any inline event handlers attached before init are lost on the duplicates.
• Needs Bootstrap CSS plus Font Awesome for the icon; pulling out is non-trivial.