hello folks 🙋♂️
once you try to build a primary webpage like in this example, a navbar with some content underneath it, for easier navigation to specific parts of that content, we will link content with links in the navbar with ID to make the webpage scroll to desired content, and that looks so good!
but what if, you want to make the navbar position fixed,
when you try to navigate again to specific content through the navbar
the webpage will not scroll to the exact place but with offset == header height
The basic solution is to give padding-block / margin-block for all content wrappers
But this article does not show this solution
The new solution is to give scroll-margin-block with value > navbar height... This will give you the same effect but in a more professional way and don’t worry about browser support 😉
and that’s for all 🥳
GitHub repo asset: https://github.com/fadyehabamer/scroll-margin-block
January 27, 2025