header-transparent-sticky

Summary

Transparent fixed header that gains a solid background and shadow on scroll past 20px. Two stacked logo PNGs swap colour for light/dark contexts, the centre nav uses Bootstrap col grid and the right side toggles a full-screen mobile offcanvas via React state.

HTML structure (minimal)

<header class="tp-header-height">
  <div id="header-sticky" class="tp-header-area tp-header-mob-space tp-transparent pl-60 pr-60 z-index-9">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-xl-2 col-6">
          <div class="tp-header-logo">
            <a class="logo-1" href="/"><img src="/logo.png" alt="logo"></a>
            <a class="logo-2" href="/"><img src="/logo-white.png" alt="logo"></a>
          </div>
        </div>
        <div class="col-xl-8 d-none d-xl-block">
          <div class="tp-header-menu header-main-menu text-center">
            <nav class="tp-main-menu-content"><!-- HeaderMenus --></nav>
          </div>
        </div>
        <div class="col-xl-2 col-6">
          <div class="tp-header-bar text-end">
            <button class="tp-offcanvas-open-btn"><span></span><span></span></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

Key SCSS tokens

.tp-header-area {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 9;
  transition: background .3s ease, padding .3s ease;
  &.header-sticky {
    background: var(--tp-common-white);
    box-shadow: 0 6px 30px rgba(0,0,0,.04);
  }
}
.tp-header-logo .logo-2 { display: none; }
.dark-mode .tp-header-logo .logo-1 { display: none; }
.dark-mode .tp-header-logo .logo-2 { display: block; }

Animation logic

// useStickyHeader hook adds .header-sticky once scrollY > 20.
const { isSticky, headerRef, headerFullWidth } = useStickyHeader(20);
useEffect(() => { headerFullWidth(); }, []);

Notable details

• Two logos in the same slot — class swap handles both light hero and dark scrolled state without recolouring SVGs.
• headerFullWidth() recomputes padding on resize so the bar can ride a fluid container.
• Offcanvas state lives in the header (React useState), not in a global store — easy to lift if needed.

Use when

• Editorial sites where the hero starts on a light background and scrolling reveals dark sections.
• When you want a hamburger that opens a fullscreen menu on every breakpoint, not just mobile.

Caveats

• Relies on Bootstrap 5 grid utilities; you'll keep the bootstrap CSS dependency.