header-nav

Summary

Sticky transparent header with the brand logo, multi-level dropdown navigation, search opener, gradient pill CTA ("Join With us"), and a mobile sidebar toggler. Below 992px the nav lifts out of its desktop slot and is appended into a slide-in sidebar drawer.

HTML structure (minimal)

<header class="ul-header">
  <div class="ul-header-bottom to-be-sticky">
    <div class="ul-header-bottom-wrapper ul-header-container">
      <div class="logo-container">
        <a href="index.html"><img src="assets/img/logo.svg" alt="logo"></a>
      </div>
      <div class="ul-header-nav-wrapper">
        <div class="to-go-to-sidebar-in-mobile">
          <nav class="ul-header-nav">
            <div class="has-sub-menu">
              <a role="button">Home</a>
              <div class="ul-header-submenu">
                <ul>
                  <li><a href="index.html">Home 1</a></li>
                  <li><a href="index-2.html">Home 2</a></li>
                </ul>
              </div>
            </div>
            <a href="about.html">About</a>
            <!-- ... more submenu blocks: Pages, Donation, Event, Blog ... -->
            <a href="contact.html">Contact</a>
          </nav>
        </div>
      </div>
      <div class="ul-header-actions">
        <button class="ul-header-search-opener"><i class="flaticon-search"></i></button>
        <a href="contact.html" class="ul-btn"><i class="flaticon-fast-forward-double-right-arrows-symbol"></i> Join With us</a>
        <button class="ul-header-sidebar-opener d-lg-none"><i class="flaticon-menu"></i></button>
      </div>
    </div>
  </div>
</header>

Key SCSS tokens

.ul-header {
  position: absolute; inset: 0 0 auto;
  z-index: 9; width: 100%;
}
.to-be-sticky.sticky {
  position: fixed; top: 0; left: 0; right: 0;
  background-color: var(--white);
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
  animation: slideDown .4s ease;
}
.ul-header-nav .has-sub-menu {
  position: relative;
  &:hover .ul-header-submenu { opacity: 1; visibility: visible; transform: translateY(0); }
}
.ul-header-submenu {
  position: absolute; top: 100%; left: 0;
  background: var(--white); min-width: 220px;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: .3s ease;
}

Animation logic

// Sticky header — toggles class once past 80px
const ulHeader = document.querySelector(".to-be-sticky");
window.addEventListener("scroll", () => {
  ulHeader.classList.toggle("sticky", window.scrollY > 80);
});

// Reparent nav between desktop slot and mobile sidebar on resize
function updateMenuPosition() {
  const target = window.innerWidth < 992 ? mobileWrapper : desktopWrapper;
  target.appendChild(menuContent);
}
window.addEventListener("resize", updateMenuPosition);

Notable details

• DOM-reparenting trick: a single .to-go-to-sidebar-in-mobile element is moved between desktop nav slot and mobile sidebar drawer on resize, avoiding duplicated markup.
• Sub-menu open animation slides 10px down with opacity fade — same shape on every dropdown for rhythm.
• Mobile menu uses the existing sidebar drawer (.ul-sidebar) so the search modal, social links, and nav share one panel.
• Sticky state pinned at exactly 80px scrollY threshold, paired with a slideDown keyframe so the bar feels like it descends rather than snaps.

Use when

• NGO/charity sites with dense navigation (Donations, Events, Blog, Pages all need sub-trees).
• Templates that ship many demo pages and need a quick way to flip between Home variants.
• When you want one shared mobile drawer for both nav and search.

Caveats

• Reparenting on resize fires on every event — fine for desktop but jittery if the user drags the window narrow continuously.
• Submenus open on :hover, not click — a click-to-open accessibility variant is not provided.