How to Fix Elementor Sticky Header Anchor Overlap
Fix Elementor Sticky Header Anchor Overlap

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:

#ANCHORID {
     /* 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:

WP Facebook Auto Publish Powered By : XYZScripts.com
Scroll to Top
  •  Free Elementor Template JSON File    Demo

    This One Page Business Website is meant to be used with the Elementor Canvas Template. Using the Elementor Responsive Settings, the main header menu disappears on mobile phones and becomes a vertical menu under the logo.

    Free One Page Business Site Elementor Template