How to prevent sticky header from hiding top of the components it navigates to

[fromITzerotoIThero]

Dear W.,

So I have this issue - when navigating to different sections of the website (which btw works great with the library you recommended :) the sticky header hides the header of the section, which looks bad:

• trying to fix this with margins and paddings of components looks bad too;
• what seems to be a good solution to me is to make the scroll on navigation a bit smaller than the default scroll to fragments to contain the header
• I'm trying to make use of the library that you recommended (with the useScrollPosition hook - cool btw)

but, I have 2 questions I can't find the answers on the net:

1. where to place all this scrolling logic - should it be in the Menu or in MenuItem where the links are or maybe the App?
2. how to create this custom scroll to positon higher than the top of the target fragment?

[piotrwicijowski]

That's a known issue - id navigation plus sticky/fixed header is a recipe for headaches. However, you should beware - trying to band-aid over it with scrolling on navigation will only cause you more trouble, besides hijacking scroll is generally considered a no-no. Instead, surprisingly paddings and margins are a better solution for that, with a bit of a trick:

1. instead of adding the id on the section you want to navigate to, create an empty child in it and add the id there
2. make the parent position: relative and the child position:absolute; top: -60px
3. it should look something like this Try it out and see if it helps. And if it is not perfect, then don't sweat it

[fromITzerotoIThero]

Maaaan, so good you're there! You saved me a ton of time!!!

[piotrwicijowski]

If you want to experience the pain of hijacking the scrolling, then we can do it one day as an exercise, but for now let's focus on delivering.

[fromITzerotoIThero]

Oh I love simple solutions just like the one you showed me :) Hijacking scrolling - a painful, yet valuable lesson I'd love to take, but in the future ;) Thank you for all your priceless help!!!

[piotrwicijowski]

Sorry to resurrect an old discussion, but I just found out a more elegant solution for the sticky header anchor scroll problem https://moderncss.dev/12-modern-css-one-line-upgrades/#scroll-margin-topbottom I'm not saying that you should implement it, or even consider it, but I'm just dropping it here for future reference in case you will come across the issue ever again.