Same page links scrolling to high so navbar hides header

I have a web page with a fixed navigation bar and dropdown button at the top with links to various subheadings further down on the same page. The system works except the linked heading always lands slightly too high so it is hidden by the navigation bar. I’ve tried everything I can think of with no luck. The page is JRW CV

Would greatly appreciate any help. Thanks!

You need to use the scroll-margin css rule to create space above your anchor links.

Since you’ve added all your anchor links to the h4 headings, you could just add the scroll margin to your h4 CSS

h4 {
padding-top: 15px;
scroll-margin: 65px;
}

But you really shouldn’t add the IDs to headings, you should add them the sections, and then create a CSS class with the scroll margin rule that you can add to the sections (or any other component on the site.) For example…

.scmargin {
scroll-margin: 65px;
}

Then just add the .scmargin class to each of your sections that have the anchor link IDs.

(NOTE: you make need to play around with the distance. I just chose 65px because it looked okay in my browser.)

This is a great answer and looks very promising. Huge thank you to printninja!