Archived topic
Anchor links under stick nav
3 replies · Started by Sneaky on May 26, 2022
A common issue when using sticky anything, is that anchor links can cause the linked item to hide behind the sticky nav.
I tried one example on here that suggested use CSS like
h3[id] {
padding-top: 110px;
margin-top: -110px;
}However when I use that not all of my anchor links work, as the link themselves do not work. I checked the code itself and I can't see why that does not always work.
I then came across some alternative CSS
h3[id] {
scroll-margin-top: 110px;
}This works great, but I am concerned it will not work with all browsers, especially if older versions. I can't make or force people to update their web browser.
Anyway, I would like your advice and if you can have a quick look, the details for access are provided in the private info
Hi Sneaky,
Tried accessing the site, but it seems to be down at the moment: https://share.getcloudapp.com/YEukjxOX
Can you check from your end if it’s working?
Hmm, not sure why, I have deactivated a plugin that may have been the issue to restrict access to login only.
Hi there,
older versions of safari and ios ( version 14.5 and below ) used a non standard property name of: scroll-snap-margin-top which was not without its own issues:
h3[id] {
scroll-snap-margin-top: 110px;
scroll-margin-top: 110px;
}
In theory browsers that don't support that property will ignore it. But without testing a bunch of old devices thats hard to say.
Alternative is to use the GP Smooth Scroll:
https://docs.generatepress.com/article/smooth-scroll/
This detects the GP Sticky Navigation and auto calculates the offset height required.
