ī‚£

Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Add An Anchor Link Offset In Divi For Fixed Headers

Nelson Miller Profile Orange
In this tutorial I will show you how to add an anchor link offset distance in Divi for when using fixed headers in the Divi Theme Builder.

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! šŸ‘†

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 using the Divi Assistant plugin
Categories: Tutorials

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin
Divi Logo (2)

Shop Our Divi Products

Plugins ā€¢ Courses ā€¢ Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Trail Committee Membership badge with map design

Join The Trail Committee!

Show support for our ongoing work creating community resources at Pee-Aye Creative and enjoy exclusive member perks in return.

Learn More

ī‚£

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

2 Comments

Comments By Members

These comments are highlighted because they were posted by fans who have a membership on this site.

  1. Shawn Smith <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    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.

    Reply

Submit a Comment

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

Recent Posts

0

Your Cart