Fix: Sticky Header Overlaps Anchor in Elementor

Elementor offers an anchor widget which is great if you want your visitors to quickly navigate to some of the key areas of your page.

It is incredibly handy for one-page websites as well. But used together with a fixed header or sticky navigation, this can be a problem.

Once the anchor link is clicked, the fixed header will overlap the element that the site scrolls to.

In this article, we are going to fix that.

Adding Elementors Anchor Widget

For the sake of this article, this is how our Elementor anchor widget is implemented. We simply add it right above the headline we want the visitor to scroll to.

This is how the Anchor widget is implemented in Elementor.

The 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 Elementors anchor widget.

Here is what we get by default.

Sticky header overlaps anchor and headline that we want the visitor to scroll to.

The Solution: A few simple lines of CSS

In fact, there are multiple ways to that but the simplest one is probably the following CSS snippet which is pretty much a set-and-forget option.

Add the code-snippet below to your child-themes style.css file or drop it directly in the WordPress customizer under the Additional CSS tab. This is great because it will apply to all of your anchor widgets throughout your entire website.

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.

The theme used in this tutorial is Page Builder Framework, a lightweight, easy to use and fast theme that was specifically designed to work with Page Builders like Elementor. The Premium Add-On includes the Sticky Navigation feature that’s shown on the screenshots above.

Stay in the Loop!

Sign up for our Newsletter & be the first to get notified about new updates & features!

Tired of the WordPress Dashboard?

Customize the WordPress dashboard & give it a more meaningful use for your clients.

Create a custom WordPress dashboard today!

About the Author

Leave a Reply

Your email address will not be published. Required fields are marked *

We take your privacy seriously! See our Privacy Policy.

Scroll to Top

Download

Download Page Builder Framework and be the first to get informed about new features & updates!

OR

Get 10% off our Premium Add-On (yearly plan).
Coupon Code to enter during checkout: 10OFF View Pricing