Sticky Header Overlaps Anchor in Elementor Page Builder Wordpress

Elementor's anchor widget is fantastic tool for creating internal link to jumps on your webpage, perfect for one-page website.
However, used together with a fixed header or sticky navigation, this can be a problem.  When an anchor link is clicked, the fixed header might block the content you're trying to scroll to.  This blog will show you how to fix that.

Adding Elementors Anchor Widget

For this article, this is how our Elementor anchor widget is implemented. We just add it above the headline or Title  that we want the visitor to scroll.

This is how the Anchor widget is implemented in Elementor.

Problem: Sticky Header Overlaps Anchor

Let’s have a quick look at what we are presented with when making no adjustments and simply try to use a sticky navigation with Elementor anchor widget. Here is what we get by default.

Solution: A few simple lines of CSS

Here are two ways to add the CSS code to fix your anchor widget and sticky header:

• Child Theme's style.css file: This option applies the fix to all anchor widgets on your entire website.
• WordPress Customizer > Additional CSS: This is also a great option for applying the fix globally.

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; // fixed header height
   margin: -100px 0 0; // negative fixed header height
   visibility: hidden;
   pointer-events: none;
 }

Make sure to play with the height/margin values above until it suits your needs. Just make sure you keep the same values (eg, height at 100px and margin at -100px). This is how things look like with the CSS snippet applied.

And that’s it! This will fix the overlapping sticky header when using anchor widgets with Elementor.