When using a fixed header, it often overlaps content when navigating to an anchor link (#section). This happens because the browser scrolls directly to the section without considering the header’s height.

<script>
document.addEventListener("DOMContentLoaded", function () {
    const headerHeight = 0;

    // Function to adjust scroll position
    function adjustScroll() {
        if (window.location.hash) {
            const target = document.querySelector(window.location.hash);
            if (target) {
                window.scrollTo({
                    top: target.offsetTop - headerHeight,
                    behavior: "smooth"
                });
            }
        }
    }

    // Adjust scroll when clicking anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener("click", function (e) {
            e.preventDefault();
            history.pushState(null, null, this.getAttribute("href"));
            adjustScroll();
        });
    });
adjustScroll();
    // Adjust scroll when page loads (for direct links)
});

</script>