How to Fix Anchor Link Scroll Offset with Sticky Headers in WordPress

Sticky headers are great for user experience — they keep your navigation accessible at all times. But they can cause a frustrating issue: when a user clicks an anchor link, the section they’re taken to often appears hidden behind the sticky header.

If you’ve run into this problem on your WordPress website, you’re not alone. In this guide, we’ll show you how to fix anchor scrolling behavior using a simple CSS trick that works across all WordPress setups — whether you’re using Gutenberg, Elementor, or a classic theme.

🧠 Why Does This Happen?

Anchor links (like #about or #services) scroll the page to bring that section to the top of the viewport. However, when a sticky header is present, it overlaps the target section. This causes part of your content to be cut off or hidden from view.

✅ The CSS Fix: scroll-margin-top

You can prevent this by using the scroll-margin-top property in CSS, which offsets the scroll position by a specific amount — typically, the height of your sticky header.

Example CSS:

    
.scroll-anchor {
  scroll-margin-top: 89.41px; /* Change this to match your header height */
  position: relative;
  padding-top: 89.41px;    
  margin-top: -89.41px;
}

Apply this class to the section or element you’re linking to.

🔧 How to Apply This in WordPress

Using Gutenberg (Block Editor)

Edit the page where your anchor is located.
Select the block you want to scroll to and give it an HTML anchor in the block settings (e.g., about).
Click Appearance > Customize > Additional CSS in your dashboard and add:

Go back to your block and add the class scroll-anchor in the “Advanced” > “Additional CSS Class” field.

    
.scroll-anchor {
  scroll-margin-top: 89.41px; /* Change this to match your header height */
  position: relative;
  padding-top: 89.41px;    
  margin-top: -89.41px;
}

💡 Why It Works:

padding-top adds space to push the content down.
margin-top: -89.41px pulls the element back up so it visually looks the same.
Combined with scroll-margin-top, this ensures consistent scroll behavior across all modern and older browsers.

Just add the class scroll-target to any section you’re linking to with an anchor.

Using Elementor

Select the section widget you want to scroll to.
In the Advanced tab, add scroll-anchor under “CSS Classes”.
Go to Site Settings > Custom CSS (or Appearance > Customize > Additional CSS) and paste:

    
.scroll-anchor {
  scroll-margin-top: 89.41px; /* Change this to match your header height */
  position: relative;
  padding-top: 89.41px;    
  margin-top: -89.41px;
}

Using Classic Themes or Page Builders

If you’re using a custom theme or a builder like WPBakery, simply:

Add the class scroll-anchor to your target sections.
Add the CSS in your customizer or theme’s stylesheet.

🎯 Pro Tip: Find Your Header Height

If you’re not sure how tall your sticky header is:

Use Chrome DevTools (Right-click > Inspect)
Hover over your header element and check its height in pixels.
Use that number (e.g., 80px, 120px, etc.) in your scroll-margin-top.

💬 Final Thoughts

This small tweak significantly improves UX by ensuring your anchor links work seamlessly, even with sticky headers. It’s quick, easy, and doesn’t require any plugins or JavaScript.

If you found this guide helpful, feel free to explore more WordPress tips and tutorials at WPGuider!

How to Fix Anchor Link Scrolling Issues with Sticky Headers in WordPress