WP Bridge Theme anchor Link Fix

You might have noticed that with the Bridge Theme on WordPress the internal anchor links within a page are not working. The Bridge theme is using the anchor in some special way within the dropdown menu which makes the in-page links unusable.(The top of the page, above the anchor link is tacked above the header therefore becomes inaccessible). The code below is a work around this issue.

1. Give a unique ID to the text link (here we will call it link-text)
2. Give a unique ID to the anchor element you want to jump to (here we call it anchor-box)
3. Include the following JavaScript code on your page:

<script>
document.getElementById('link-text').addEventListener('click', function(event) {
    event.preventDefault(); // Prevent the default link behavior

    // Get the element to scroll to
    var targetElement = document.getElementById('anchor-box');
    
    // Calculate the top position of the element relative to the document
    var topPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - 120;

    // Smooth scroll to the calculated position
    window.scrollTo({
        top: topPosition,
        behavior: 'smooth'
    });
});
</script>