header-topbar-nav

Summary

Two-row sticky header used across every page: a utility topbar with emergency call mini-popup, location, hours and inline search, plus a Bootstrap-based navigation row with multi-level dropdowns and a separate "Departments" mini-popup launcher.

HTML structure (minimal)

<header class="header header-layout1">
  <div class="header-topbar">
    <div class="container-fluid">
      <ul class="contact__list d-flex flex-wrap align-items-center list-unstyled">
        <li>
          <button class="miniPopup-emergency-trigger" type="button">24/7 Emergency</button>
          <div id="miniPopup-emergency" class="miniPopup miniPopup-emergency text-center">
            <div class="emergency__icon"><i class="icon-call3"></i></div>
            <a href="tel:+201061245741" class="phone__number"><i class="icon-phone"></i><span>+2 01061245741</span></a>
            <p>Please feel free to contact our friendly reception staff…</p>
            <a href="appointment.html" class="btn btn__secondary btn__link btn__block">
              <span>Make Appointment</span><i class="icon-arrow-right"></i>
            </a>
          </div>
        </li>
        <li><i class="icon-phone"></i><a href="tel:+5565454117">Emergency Line: (002) 01061245741</a></li>
        <li><i class="icon-location"></i><a href="#">Location: Brooklyn, New York</a></li>
        <li><i class="icon-clock"></i><a href="contact-us.html">Mon - Fri: 8:00 am - 7:00 pm</a></li>
      </ul>
      <ul class="social-icons list-unstyled">…</ul>
      <form class="header-topbar__search">
        <input type="text" class="form-control" placeholder="Search…">
        <button class="header-topbar__search-btn"><i class="fa fa-search"></i></button>
      </form>
    </div>
  </div>
  <nav class="navbar navbar-expand-lg sticky-navbar">
    <a class="navbar-brand" href="index.html"><img src="…/logo-light.png" class="logo-light" alt="logo"></a>
    <button class="navbar-toggler"><span class="menu-lines"><span></span></span></button>
    <ul class="navbar-nav ml-auto">
      <li class="nav__item has-dropdown">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle nav__item-link active">Home</a>
        <ul class="dropdown-menu">…</ul>
      </li>
      <!-- About / Doctors / Blog / Shop / Contacts -->
    </ul>
    <div class="d-none d-xl-flex align-items-center ml-30">
      <div class="miniPopup-departments-trigger">
        <span class="menu-lines" id="miniPopup-departments-trigger-icon"><span></span></span>
        <a href="departments.html">Departments</a>
      </div>
      <ul id="miniPopup-departments" class="miniPopup miniPopup-departments dropdown-menu">…</ul>
    </div>
  </nav>
</header>

Key SCSS tokens

.header {
  &.header-layout1 .header-topbar { background-color: $color-secondary; color: $color-white; }
  .sticky-navbar {
    background-color: $color-white;
    transition: all .3s ease;
    &.is-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 1020; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
  }
  .nav__item-link { font-family: $font-heading; font-weight: 700; padding: 35px 18px; }
  .miniPopup { position: absolute; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all .3s; }
  .miniPopup.active { opacity: 1; visibility: visible; transform: translateY(0); }
}

Animation logic

// Sticky toggle on scroll
$(window).on('scroll', function () {
  if ($(window).width() >= 992) {
    var $stickyNavbar = $('.sticky-navbar');
    if ($(window).scrollTop() > 150) $stickyNavbar.addClass('is-sticky');
    else $stickyNavbar.removeClass('is-sticky');
  }
});

// Mini popups (Emergency, Departments)
function openMiniPopup(trigger, popup, cssClass) {
  $(trigger).on('click', function (e) {
    e.preventDefault();
    $(this).toggleClass(cssClass);
    $(popup).toggleClass(cssClass);
  });
}
openMiniPopup('.miniPopup-emergency-trigger', '#miniPopup-emergency', 'active');
openMiniPopup('#miniPopup-departments-trigger-icon', '#miniPopup-departments', 'active');

Notable details

• Emergency mini-popup is launched from the topbar text itself (button styled inline), not a separate icon — keeps the topbar dense without a row of glyphs.
• Departments trigger is a hybrid: a hamburger-style toggler and a regular link to departments.html sit side by side, so users can either browse the floating list or click through to the full page.
• Sticky navbar uses a 150-px scroll threshold (instead of 0) so the header still looks airy on initial scroll before becoming compact.

Use when

• Healthcare, services, or local-business sites that need a contact-rich utility row above the main nav.
• Layouts where you want side popups beside the main menu (e.g. a Departments / Locations / Specialties shortcut).
• Any project where the brand wants both a phone number AND a "live" emergency CTA in the header.

Caveats

• Built on Bootstrap 4.5 dropdowns plus jQuery — porting to a JS-framework requires reimplementing both the dropdown and the mini-popup logic.
• Topbar gets cramped under 1200 px and is hidden on mobile via Bootstrap utility classes.