- This topic has 9 replies, 3 voices, and was last updated 4 years, 11 months ago by David.
-
AuthorPosts
-
May 2, 2019 at 3:04 pm #887167Simon
Hey guys,
So I love the sticky navigation option, only I had forgotten that the huge issue with it is that when you use a link in say Table Of Contents to throw your visitor down the page, the headings are covered by the sticky nav leaving them wondering where the hell they are.
I figure the easy solution here would be to add margins to the tops of all your headings that is more than the height of the sticky nav, but that seems messy.
Is there another way?
May 2, 2019 at 3:35 pm #887181TomLead DeveloperLead DeveloperHi there,
If you use our Smooth Scroll option (https://docs.generatepress.com/article/smooth-scroll/), it will automatically offset the sticky navigation to prevent overlapping.
Let me know if that helps or not π
May 3, 2019 at 3:59 am #887670SimonOh man I cant believe I was not aware this existed. Now i need to go back through 60+ pages and add it to all the links π
This may sound dumb, but will this also work if someone clicks a link to an anchor on another site? Like from the google search results as an example? or will it only work if the person is already on my page?
And is that how the wirecutter is doing it too?
https://thewirecutter.com/reviews/small-bedroom-ideas/#why-you-should-trust-meMay 3, 2019 at 5:21 am #887738DavidStaffCustomer SupportHi there,
you can add the filter provided here, it will trigger the smooth scroll on any anchor link clicked:
https://docs.generatepress.com/article/generate_smooth_scroll_elements/
Smooth scroll jump links will only work if the user is on that page. Not much can do about external links being clicked through.
Looks like a similar method being used on that site.
May 3, 2019 at 6:27 am #887805SimonUmmm WHA!
This is awesome. Thanks so much David.
Any thoughts on what I would need to do to get this to work for people coming from an external page?
I and many others would have search rankings that link to the anchors, so they are used more than many people know.
May 3, 2019 at 6:44 am #887821DavidStaffCustomer SupportTom adds filters to everything π
Alternative is to do something like this with CSS:
.product-review-item h3 { padding-top: 90px !important; margin-top: -60px; }
May 3, 2019 at 7:06 am #887955SimonHaha, he does.
That is very smart, will have a play around with that and see what I can come up with. I am sure browser compatibility is going to kick me in the face.
So I’ll have to turn off the smooth scrolling (otherwise I’ll have double spacing) and add the following, so it works with the other page anchors as well.
h2 {
padding-top: 60px;
margin-top: -60px;
}
h3 {
padding-top: 60px
margin-top: -60px;
}Any quick thoughts on issues the above may cause?
May 3, 2019 at 7:11 am #887963DavidStaffCustomer SupportShouldn’t be any browser compatibility issues.
One thing to be mindful of is margins collapsing. So an element above it that has bottom margins / neg margins may cause the space to collapse, but i can’t see that applying with your layout.May 3, 2019 at 7:15 am #887969SimonAh your awesome. Yeah I was keeping the margin collapse in mind. And I too didn’t see any issues with it. This looks like a REALLY good fix.
It gives me some peace of mind that together we don’t see any major concerns, probably in like IE9 or something but I honestly don’t care about them folkes.
Thank you so much for your help David, and you too Tomo. Always a pleasure.
Cheers,
SimonMay 3, 2019 at 9:34 am #888123DavidStaffCustomer SupportGlad we could be of help.
-
AuthorPosts
- You must be logged in to reply to this topic.