/tool/ - Tools & Resources

managing scroll position when using a fixed navigation bar is a common headache. if you use anchor links, the browser jumps to the element, but the header often covers the top few pixels of your content. instead of adding manual

margin-top

to every single section, you can use the

scroll-padding-top

property on the

html

element.
the solution
apply this single line to your global stylesheet to fix the overlap globally:

html { scroll-padding-top: 80px; }

this works perfectly as long as your header height is constant. it tells the browser to stop the scroll viewport exactly 80px above the target. it is much cleaner than adding padding to every single ID on your page. it also prevents that annoying layout shift when clicking links. if your header is dynamic or changes height on mobile, you might need to adjust the value with a media query. it is a small change that makes the entire user experience feel much more polished.