When you are using a fixed Theme Builder header on your Divi website alongside anchor links, you might have noticed a common issue: clicking on an anchor link causes the page to scroll to the desired section, but the fixed header overlaps the content at the top. This happens because the anchor link does not account for the height of the fixed header. This is not a good user experience, so in this tutorial, I will show you how to incorporate an offset distance for anchor links in Divi to prevent content from being hidden by the fixed header in the Divi Theme Builder.
▶️ Please watch the video above to get all the exciting details! 👆
FYI: Do It With Divi Assistant!
Why work so hard? You can do this easily with a setting in our Divi Assistant plugin!
Copy And Paste The jQuery Code Snippet Into Your Divi Site
In order to resolve the issue of fixed headers overlapping content when using anchor links in Divi, we’ve created a jQuery code snippet to adjust the offset distance when navigating to specific sections of your webpage.
To implement this solution, simply copy the following jQuery code snippet and paste it into your Divi site. This code will adjust the scroll position when navigating to anchor links, ensuring that the target section is fully visible below the fixed header.
After pasting the code snippet into your Divi website, remember to adjust the scrollTop value in the code to match the height of your fixed header.
Where To Paste The jQuery Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
<script>
jQuery(document).ready(function($) {
$("a").mouseenter(function() {
let pac_da_href = $(this).attr("href");
if (pac_da_href !== undefined && pac_da_href.startsWith("#")) {
$(this).css('cursor', 'pointer');
$(this).attr("pac_da_href", pac_da_href);
$(this).removeAttr("href");
}
}).mouseleave(function() {
let pac_da_href = $(this).attr("pac_da_href");
if(pac_da_href !== undefined){
$(this).css('cursor', '');
$(this).attr("href", pac_da_href);
$(this).removeAttr("pac_da_href");
}
});
jQuery('a').on('click', function(event) {
var hash = $(this).attr('pac_da_href');
if (hash && hash.startsWith('#')) {
var targetScrollPosition = $(hash).offset().top - 200;
$('html, body').animate({
scrollTop: targetScrollPosition
});
}
});
});
</script>How To Add An Anchor Link Offset For Fixed headers Using Divi Assistant
Here are the simple steps to add an anchor link offset distance in Divi for fixed Theme Builder headers using our popular Divi Assistant plugin:
- Install and activate the Divi Assistant plugin
- Click on the Frontend Helper tab and the Miscellaneous subtab
- Enable the setting and set the desired value
I hope that is easy enough for you! 😉
Learn More About Divi Assistant!
Our flagship "helper" plugin has (141) main features to make your life easier when working with Divi!
Excellent post! This is an anoying problem, and you’ve come up with a good solution. Thanks for sharing both the code and the plugin solution. I appreciate your hard work and willingness to teach us. Happy Independence Day! Be well.
Thank you Shawn, I have wanted to solve this for quite some time, and glad to be finally able to share the solution with everyone!