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.

Share this post if you like it.
Default image
Davor Veselinović

I'm Davor, founder of Worda Themes. Working as a Full Stack Developer with more than a decade of experience with WordPress. I build themes and plugins and enjoy writing useful blog posts and share my ideas with others.

Leave a Reply