The Problem: Sticky Headers Covering Anchor Content
If you’ve built a WordPress site using Elementor with a fixed or sticky header, you’ve likely encountered this common but frustrating issue: when visitors click on anchor links to navigate to specific sections of your page, the browser correctly scrolls to the anchor point, but the fixed header ends up covering the top portion of the content.
This creates a poor user experience, as readers miss the beginning of the section they wanted to view and must manually scroll up slightly to see the content properly.
Technical Solutions to Fix Anchor Link Scrolling
Let’s explore four effective solutions to address this issue, ranging from simple CSS fixes to JavaScript implementations and plugin options.
1. Adding Custom CSS with scroll-padding-top (Recommended)
The cleanest and most modern approach uses the scroll-padding-top CSS property, which is supported by all modern browsers. This solution instructs the browser to leave extra space at the top when scrolling to anchor points.
Add this CSS code to Elementor’s Custom CSS section or your theme’s stylesheet:
html {
scroll-padding-top: 80px; /* Adjust this value based on your header height */
}
/* Alternative for older browsers */
:target {
scroll-margin-top: 80px; /* Adjust this value based on your header height */
}
The key is to set the pixel value to match the exact height of your fixed header. This method requires no additional HTML elements or JavaScript and works universally across your site.
2. Creating Invisible Anchor Elements
Another approach is to place invisible elements before your headings to serve as anchor points. These elements are positioned above the actual content to compensate for the header height:
<div id="chapter1" style="position: relative; top: -80px; visibility: hidden; height: 0;"></div>
<h3>1 - Your Content</h3>
This technique requires adding these invisible elements before each section you want to link to, which can become cumbersome for content-heavy sites but works reliably across all browsers.
3. Using JavaScript for Custom Scroll Behavior
For more control over scrolling behavior, you can implement a JavaScript solution that calculates the proper scroll position while accounting for your header height:
// Add this to your JS file or in a custom HTML block
document.addEventListener('DOMContentLoaded', function() {
// Find all internal links
const internalLinks = document.querySelectorAll('a[href^="#"]');
internalLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href').substring(1);
const targetElement = document.getElementById(targetId);
if (targetElement) {
const headerOffset = 80; // Your header height in pixels
const elementPosition = targetElement.getBoundingClientRect().top;
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
}
});
});
});
This solution not only fixes the header overlap issue but also adds smooth scrolling functionality. Remember to adjust the headerOffset value to match your specific header height.
4. Using the “Easy Table of Contents” Plugin
If you prefer a no-code solution, the “Easy Table of Contents” WordPress plugin includes built-in options to handle scroll offset when navigating between sections. After installing the plugin:
- Go to Settings > Table of Contents
- Find the “Smooth Scroll Offset” option
- Enter your header height in pixels
- Save your changes
This plugin is particularly useful if you’re already using or planning to use a table of contents on your pages, as it combines both functionalities.
Which Solution Should You Choose?
For most modern WordPress sites, the first solution using scroll-padding-top CSS is recommended because:
- It’s clean and requires minimal code
- No need to modify your HTML structure
- Works site-wide automatically
- Supported by all modern browsers
- Easiest to maintain over time
If you have complex layouts or special scroll requirements, the JavaScript method offers the most flexibility. For non-technical users, the plugin option provides a user-friendly solution without touching code.
Conclusion
Fixing anchor link scrolling issues is essential for providing a smooth user experience on your WordPress site. By implementing one of these solutions, you’ll ensure that your sticky header never obscures important content when users navigate through anchor links.
Remember to test your chosen solution across different devices and browsers to verify it works correctly with your specific theme and header configuration.
Have you encountered other navigation issues with your WordPress site? Let me know in the comments below!
