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 solutionapply 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.