Elementor Scroll Offset Menu Anchors and Table Of Content

In this tutorial, I'm going to show you how to add a scroll offset to your Elementor menu anchor elements, regular link anchors, and table of content links.

This is often required when you have a sticky header, to prevent that sticky header from being on top of the content.

Even without a sticky header, adding some top padding to the scroll position makes the UI / UX better.

Works for:

• Elementor menu anchor elements
• Normal anchor links where you added an ID to an element, and link to it
• Elementor Table of content element links
• Most others anchor links

Let's get started!

For the Elementor menu anchor elements & normal anchor links

Normal anchor links are those where you added an ID to an element, and link to it like this : /#id-added-to-element.

For these, and menu anchor elements, you will want to follow these instructions:

First, add this code in a new code snippet, or in functions.php

Learn more about Code Snippets. That's what I recommend you use, as it's essentially a well organised functions.php file.

Importantly, don't add the code in Elementor Custom Code, it won't work.

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 - 90;
} );
} );
</script>
<?php
} );

Then, adjust the "90" in the code, to the amount of pixels you need for your offset.

Don't add "px" though... just change the "90" value to something else, if needed.

Finally, activate the code snippet

If you added this in a code snippet, give it a name (such as Elementor Anchors Scroll Offset) and activate.

For the Elementor Table Of Content, and other anchor links

For the Elementor table of content element, and other anchor links that still might not be working with the previous code, use the following CSS, globally.

You can add the CSS anywhere global, such as your child theme's styles.css file, customizer > additional CSS field, Elementor Pro global CSS field, etc.

html, body {
   scroll-padding-top: 90px;
}

Adjust the "90px" in the code, to the amount of pixels you need for your offset.

For Menu Anchors Elements

I suggest using this option only if the above two methods didn't work for you.

This method will only work if you are using Elementor Menu Anchor elements for your anchors.

If so, you can add this CSS globally, and it will take care of setting the scroll offset. Adjust the '90px' and '-90px' values as you need, they just need to match, and the margin to be a negative value.

.elementor-menu-anchor {
    margin-top: -90px;
    padding-top: 90px;
}

Finally, enjoy your new Elementor offset anchor links!

And that's it! Everything should be working fine.

You have now improved UI/UX with this Elementor offset on your Elementor menu anchors and Elementor table of content elements!