Anchor links - Can you offset ?

[dee]

Hi all,

Building out a wordpress site in Divi for a friend. Divi seems fab.... new to it.

I have a problem where a sticky menu is blocking content linked to with an anchor link on a one page scroll section. So for instance:

homepage/#contact

Is there a way to offset the anchor point so content comes in lower than the menu bar ?

Thanks

 

[ukbackorder]

This is what chatGPT said (I just copy/pasted your whole post) - any use?

'Yes, it's possible to offset the anchor point of the content so that it appears below the sticky menu bar.

One way to achieve this is by adding some custom CSS to your WordPress site. Here are the steps to follow:

1. Identify the CSS class or ID of the sticky menu bar. You can do this by inspecting the element in your web browser's developer tools.
   
   
2. Once you have identified the CSS class or ID of the sticky menu bar, add the following code to your site's CSS file:

css
/* Offset anchor point for one page scroll sections */
.your-sticky-menu-class {
margin-top: -100px; /* adjust this value to the height of your sticky menu bar */
padding-top: 100px; /* adjust this value to the height of your sticky menu bar */
}

Make sure to replace "your-sticky-menu-class" with the actual CSS class or ID of your sticky menu bar.

1. Save the CSS file and refresh your website. The anchor links should now scroll to the correct position, below the sticky menu bar.

Note: the margin-top and padding-top values in the CSS code may need to be adjusted to match the actual height of your sticky menu bar. You can experiment with different values until you find the one that works best for your site.'

I then asked it 'are there any other ways?' and it gave me a list - let me know if you want it

 

[dee]

Thank you ! I'll give it a whirl. Appreciated.

I managed to wangle it using a top border on the elements, but spaces it out a bit . If this works might be more elegant.

Forgot about ChatGPT lol. I should have gone there !

 

[ukbackorder]

I use it now to write a lot of code that I *could* write but don't want to spend the time on. It also said this with more ideas:

'Yes, there are a few other ways to offset the anchor point for one page scroll sections on a WordPress site. Here are a few alternatives:

1. Use a plugin: There are several WordPress plugins available that can help you offset the anchor point for one page scroll sections. One popular option is the "Page scroll to id" plugin, which allows you to set a custom offset for each anchor link on your site. Simply install the plugin, activate it, and configure the offset value in the plugin settings.
   
   
2. Add a scroll offset to your anchor links: Another option is to add a scroll offset to your anchor links directly, using JavaScript. This method involves adding some custom JavaScript code to your site, which will detect when an anchor link is clicked and adjust the scroll position accordingly. Here's an example of the code you can use:

javascript
jQuery(document).ready(function($) {
$('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function(event) {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top - 100 // adjust this value to the height of your sticky menu bar
}, 1000);
}
}
});
});

This code should be added to your site's JavaScript file, or to a separate custom JavaScript file if you're using a child theme. It uses the jQuery library to detect when an anchor link is clicked and adjust the scroll position accordingly, with an offset value of 100 pixels (adjust this value to match the height of your sticky menu bar).

1. Add a top margin to your one page scroll section: Another option is to add a top margin to your one page scroll section, which will push the content down below the sticky menu bar. To do this, simply add a custom CSS rule to your site's CSS file, like this:

css
#your-one-page-scroll-section {
margin-top: 100px; // adjust this value to the height of your sticky menu bar
}

Make sure to replace "your-one-page-scroll-section" with the actual ID of your one page scroll section. This will add a top margin of 100 pixels to your one page scroll section, pushing the content down below the sticky menu bar.'

In my experience it is not totally right 100% of the time but you can usually tell it and it fixes itself until eventually you get what you need.

 

[dee]

cheers. Didnt know that plug in existed ! That seems easy !