Apply Anchor Offsets to Prevent Content From Hiding Behind the Header

If you’ve ever linked to a particular element on a Post, Page, etc., only to find the content hidden behind your Header, then this code snippet is for you.

This snippet assumes your Header is 89px (MyListing’s default Header size) and applies an offset at least the same height as your Header. If your Header ends up being a different height, however you implement it, you can easily adjust the offset to fit your needs.

Looking at Line 10 of the code snippet, I set it for a 109px offset. Assuming the Header is 89px, that gives me a 20px padding between the Header and content.

<?php

add_action("wp_footer", function () {
    if (!defined("ELEMENTOR_VERSION")) {
        return;
    } ?>
<script>
window.addEventListener('elementor/frontend/init', function() {
elementorFrontend.hooks.addFilter( 'frontend/handlers/menu_anchor/scroll_top_distance', function( scrollTop ) {
return scrollTop - 109;
} );
} );
</script>
<?php
});