Scroll to Anchor question

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.

How do others handle this?

1 Like

Hey @ShorePatrol, here is how I fix that:

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.

2 Likes

Great solution @Darko - thank you!

1 Like

@Darko - Would love a video on this, as I still can’t seem to implement what you suggested.

1 Like

Here is the video: Loom | Free Screen & Video Recording Software | Loom

2 Likes

NOW I get it! Perfect - so helpful! Thank you @Darko !

1 Like

@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.)

1 Like

I tried to recreate that bug but everything worked fine for me, can you maybe record me your screen with that bug ?

Thanks @Darko - using a new computer now, and I don’t see this issue - but I still have the hamburger menu problem mentioned in the other thread.