Sticky Navigation.css

//Add to stylesheet
.site-header {
	position: sticky !important;
	top: 0;
	background-color: var(--light-1);
	z-index: 10;
	transition: background-color 0.3s ease;
} /* Sticky navigation styling */
.site-header.sticky {
    background-color: var(--light-2);
} /* Sticky navigation styling */

//Add to footer script
<!-- Sticky navigation adjustment for WordPress Admin Bar -->
<script>
    function adjustHeaderTop() {
      const adminBar = document.getElementById("wpadminbar");
      const siteHeader = document.querySelector(".site-header");

      if (!siteHeader) return; // Exit if the site-header element is not found

      const screenWidth = window.innerWidth;

      if (screenWidth <= 600) {
        siteHeader.style.top = "0";
      } else if (screenWidth >= 601 && screenWidth <= 782) {
        siteHeader.style.top = adminBar ? "46px" : "0";
      } else if (screenWidth >= 783) {
        siteHeader.style.top = adminBar ? "32px" : "0";
      }
    }

    // Adjust header top on DOMContentLoaded and window resize
    document.addEventListener("DOMContentLoaded", adjustHeaderTop);
    window.addEventListener("resize", adjustHeaderTop);
</script>

<!-- Sticky navigation styling change -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const siteHeader = document.querySelector(".site-header");

    if (!siteHeader) return;

    function updateStickyState() {
      // Check if the scroll position is greater than 20px
      if (window.scrollY > 20) {
        siteHeader.classList.add("sticky");
      } else {
        siteHeader.classList.remove("sticky");
      }
    }

    // Check the sticky state on scroll and resize
    window.addEventListener("scroll", updateStickyState);

    // Initial check in case the page is already scrolled
    updateStickyState();
  });
</script>