Fix Elementor anchor scroll overlapping with Sticky header

As you might know, Elementor allows you to easily link the sections of your pages using Anchor widgets or by simply applying CSS ID to the respected section.

In this way, you can create one page website or simply link to the appropriate page part using anchor links. However, it can create an overlapping issues if the sticky header is used on your website.

This is caused by the calculations of the page size and sticky header section height.

To fix this small issue, we are gonna apply the CSS workaround.

CSS Fix for Elementor Achor scroll issue with Sticky header active

Lets look at the code here.

body:not(.elementor-editor-active) .elementor-widget-menu-anchor {
position: relative;
z-index: -1;
}
body:not(.elementor-editor-active) .elementor-menu-anchor:before {
content: "";
display: block;
height: 100px;
margin: -100px 0 0;
visibility: hidden;
pointer-events: none;
}

As you can see, there are some values entered respectively. The ones we need to alter per website are height and margin.

The current example shows 100px value, you need to change it to the actual height of your sticky header section/container. For example, if it’s 60px, then replace the values like this:

body:not(.elementor-editor-active) .elementor-widget-menu-anchor {
position: relative;
z-index: -1;
}
body:not(.elementor-editor-active) .elementor-menu-anchor:before {
content: "";
display: block;
height: 60px;
margin: -60px 0 0;
visibility: hidden;
pointer-events: none;
}

Conclusion

Now just open up the website and test your anchor link, the scroll should navigate to the exact position of the anchor link inside the post content. Feel free to share your impressions in the comments section below.