Wondering how other people handle this (not Divhunt specific):
I have a top header which is sticky - the menu items each scroll to the top of a section of the same page. On desktop, this work perfectly.
On mobile, the top of the sections scroll behind the header - so the top part of the section is hidden by the sticky header. This is expected behavior since the anchors by default scroll to the top of the page - but in this case, the top of the page has a sticky header - so it cuts off the top of the section behind the header.
I could put the anchor tag for each section in the section above it, which would work for mobile, but then on desktop it wouldnât work perfectly anymore.
I make one div that contains ID and which will be used as my anchor, that div is absolute to the section I actually want to be scrolled to when I click some link. After that I set âTOPâ property to a negative value and the value is determined by the height of my navbar (in this case 78px). Then I put a negative z-index just to ensure this div will never be visible.
In the responsive part if you change the sizing of your navbar you need to change the position of this anchor based on the height of your navbar.
This has worked fine for me, you can try it out.
P.S. If someone has a better solution I will be glad to take a look at it.
@Darko - something weird is happening - when I modified the absolute value for smaller mobile sizes (since the navbar is different height) - now the navigation âjumpsâ to the anchors, instead of smooth scrollsâŚlooking into it, but not sure why this is happening.
Works fine in the builder, but not exported codeâŚweirdâŚI even tried to set it back the way it was, no smooth scrollâŚdid something happen to smooth scroll?
(I even tried to uninstall the scroll plugin and reinstall - didnât work.)
