site-header

Summary

A tri-row classical header: a utility info bar (address + hours), a centered logo flanked by mirrored left/right nav lists, and a phone-CTA tile on the right; on small screens the desktop nav collapses into a slide-in drawer with metisMenu-driven sub-menus.

HTML structure (minimal)

<header class="header-wrap header_1">
  <div class="container">
    <div class="row">
      <div class="col-xl-12 d-flex justify-content-between align-items-center">
        <div class="top_head_left">
          <ul>
            <li><i class="fas fa-map-marker-alt"></i><a href="#">6391 Elgin St, Delaware 10299</a></li>
            <li><i class="far fa-clock"></i><a href="#">Mon – Fri: 8.00 – 18.00</a></li>
          </ul>
        </div>
        <div class="logo_widget"><div class="logo_1"><a href="#"><img src="logo_main.png" alt=""></a></div></div>
        <div class="top_head_right">
          <ul><li><i class="fas fa-calendar-alt"></i> Need Free Consultation? <a href="#">Make an Appointment</a></li></ul>
        </div>
      </div>
    </div>
    <div class="main_menu_widget">
      <div class="row align-items-center px-3">
        <div class="col-12 d-flex justify-content-between align-items-center">
          <div class="main-menu">
            <ul>
              <li><a href="#">Home <i class="fas fa-angle-down"></i></a>
                <ul class="sub-menu">
                  <li><a href="index.html">Home 1</a></li>
                  <li><a href="index-2.html">Home 2</a></li>
                </ul>
              </li>
              <li><a href="about.html">About</a></li>
            </ul>
            <ul class="secend_menu">
              <li><a href="#">Page <i class="fas fa-angle-down"></i></a></li>
              <li><a href="contact.html">Contact</a></li>
            </ul>
          </div>
          <div class="main-menu_2 d-flex align-items-center">
            <a href="tel:232-456-7890" class="right_button">
              <div class="right_icon"><i class="icon-phone"></i></div>
              <div class="content_top"><p>Need help? Let's Talk</p><h5>(232) 456-7890</h5></div>
            </a>
          </div>
          <div class="mobile-nav-bar d-block d-lg-none">
            <div id="hamburger"><i class="fal fa-bars"></i></div>
            <div class="mobile-nav">
              <button class="close-nav"><i class="fal fa-times-circle"></i></button>
              <nav class="sidebar-nav"><ul class="metismenu" id="mobile-menu">…</ul></nav>
            </div>
            <div class="overlay"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

Key SCSS tokens

.header-wrap {
  &.header_1 .main-menu {
    display: flex; gap: 40px;
    > ul { display: flex; gap: 24px; }
    .sub-menu {
      position: absolute; top: 100%; left: 0;
      min-width: 200px; padding: 12px 0;
      background: #fff; box-shadow: 0 8px 24px rgba(34,33,39,0.08);
      opacity: 0; visibility: hidden;
      transform: translateY(8px);
      transition: 0.3s ease;
    }
    li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
  }
  .right_button { display: flex; align-items: center; gap: 12px;
    .right_icon { width: 48px; height: 48px; border-radius: 50%; background: #c8242f; color: #fff; display: grid; place-items: center; }
  }
  .mobile-nav { position: fixed; top: 0; left: -320px; width: 320px; height: 100%; background: #fff; transition: 0.4s; z-index: 999; }
  .mobile-nav.show { left: 0; }
  .overlay.active { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 998; }
}

Animation logic

$('#hamburger').on('click', function() {
  $('.mobile-nav').addClass('show');
  $('.overlay').addClass('active');
});
$('.close-nav, .overlay').on('click', function() {
  $('.mobile-nav').removeClass('show');
  $('.overlay').removeClass('active');
});
$('#mobile-menu').metisMenu();

// Sticky variants for header_2 / header_3
$(window).scroll(function() {
  if ($('html').scrollTop() > 100 && $(document).width() > 767) {
    $('.header_2').addClass('stop');
  } else {
    $('.header_2').removeClass('stop');
  }
});

Notable details

• The desktop nav splits into two <ul> lists (main-menu > ul and .secend_menu) so the centered logo can sit between them — a layout pattern that avoids absolute positioning and stays alignable in flex.
• Sticky behaviour is opt-in per home variant (.header_2, .header_3) so the static header_1 stays calm while the more cinematic homes engage scroll-attached nav.
• The mobile drawer uses metisMenu for accordion sub-menus instead of building toggle JS by hand.

Use when

• Traditional service brands (law, accounting, medical) where the centered logo and utility-bar conventions still resonate.
• You need both a primary nav and a contact CTA visible at a glance.
• Designs that want sub-menus without a custom mega-menu solution.

Caveats

• Five header markup variants exist across index.html … index-5.html (header_1 … header_5) — pick one and delete the rest, or you'll ship dead CSS.
• Relies on jQuery + metisMenu; modernise to CSS :focus-within if you remove jQuery.
• About-link <li> appears twice in the mobile menu in index.html — copy/paste oversight in the source.