Smallskinny

Fixing Elementor Menu Anchor + Sticky Header Overlap Issue

If you already know how to set up the Menu Anchor, click Here to skip to the solution to the overlap problem. 

The First step is go to the page you want to place the Menu Anchor in and click “Edit with Elementor” to open the Elementor page builder for that page (You have to be logged into wordpress to see this bar at the top). You can also open the elementor page builder by going to “Pages” in your wordpress dashboard, and hover over the page title so the option “Edit with Elementor” will appear below it.

Once you have done that type “anchor”, to get to the Menu anchor and drag the widget to where you want it to scroll to.

The next step is to give your Menu Anchor an Id that you will later use as a link that will be attached to a button or clickable text that will initiate the scroll effect.

In the picture above we will be using the button in the “Call to Action” widget to initiate the scroll sequence to scroll to the menu anchor we placed earlier. 

Put the Menu Anchor ID as the button Link as shown in the picture above. Don’t forget to put “#” before the anchor ID.

This is the overlap problem that happens if you have a sticky header. To fix this problem you have to insert additional css code to manually compensate for the height of the sticky header. To get there follow the picture below and click “Customize”, or you can get there from the wordpress dashboard, on the sidebar got to “Appearance” then click “Customize”.

Once you open the Customize Sidebar click Additional CSS and insert the CSS code. It should look the same as the picture below. You can modify the height and margin depending on how thick your sticky header is.

body:not(.elementor-editor-active) .elementor-menu-anchor:before {
content: “”;
display:block;
height: 5%; /* fixed header height*/
margin: -5% 0 0; /* negative fixed header height */
visibility: hidden;
pointer-events: none;
}

.tag-links {
display: none;
}

Now its fixed and it should go all the way down and not be covered by the sticky header.

Share this post

Share on facebook
Share on google
Share on twitter

Leave a Reply

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