If you use a sticky header with anchor links, there is one problem since Elementor 3.0 was released. Everything is fine, if you have a single one page layout. But when you have subpages and use your anchor links also in the main navigation, then you will have some trouble.

You’re on a subpage and want to jump to an anchor link on another page. You scroll automatically to the anchor, but now the sticky header is placed over it.

Copy and paste the following snippet and the problem will solved.

add_action('wp_footer', function () {
    ?>
    <script>
        var hash = window.location.hash.replace('#', '');
        var scrollToElement = document.getElementById(hash);
        var header = document.querySelector('[data-elementor-type="header"]');
        var headerHeight = header.offsetHeight;

        if (null !== scrollToElement) {
            var style = document.createElement('style');
            style.innerText = '#' + hash + ':before { content: ""; display:block; height: ' + headerHeight + 'px; margin: ' + (-1 * headerHeight) + 'px 0 0; visibility: hidden; pointer-events: none; }';
            document.head.appendChild(style);

            document.addEventListener('DOMContentLoaded', function() {
                setTimeout(function () {
                    document.head.removeChild(style);
                }, 1000);
            });
        }
    </script>
    <?php
}, 1);

Leave a Reply

Your email address will not be published. Required fields are marked *