Fix Elementor Sticky Header Anchor Overlap

Fix Elementor Sticky Header Anchor Overlap

I’m starting to post the solutions that I provide to clients so that they can be used by anyone who finds them on the web. This post is about how to Fix Elementor Sticky Header Anchor Overlap.

This is a problem common problem. I see it mentioned often in the Elementor Facebook Group. But I don’t post many solutions there because the majority of the posters lately don’t understand HTML or CSS so they would understand the solution.

Here’s how it comes about. You create a page with multiple sections and add an anchor to each section.

Elementor Section with an Anchor Widget

Then you add a link to the anchor in the menu.

Elementor Dropdown Anchor Menu

But when you click the menu link, your taken to the middle of the section because the Elementor Sticky Header overlaps the section.

Elementor Sticky Header Overlap Anchor Section

The solution is some simple CSS:

/* move anchor down */
display: block;
position: relative;
top: -200px;

By definition each Anchor widget has an ID so we apply the CSS to the widget. 

Display: block displays the anchor like a a block element (like <p>). It starts on a new line, and takes up the whole width.

Position: relative positions the anchor relative to its normal position.

Top: -200px somewhat counter intuitively moves the anchor down from under the sticky header. 

Once we add the CSS for the Anchor ID, the page opens with the title of the Board of Directors showing:

Elementor Sticky Header Positioned above the anchor with css


Here’s a short video that explains the whole process: