NavBar hides top of content below it and targets of internal links

I’ve seen several people ask this question, but haven’t found a solution that has worked for me:

On my Portfolio Page project, the navbar covers what should start below it ar the top of the page. When I jump to internal links from the button, it covers the top of those, too. I’ve tried all sort of suggested combinations of margins, padding, and the like, without success. One thing that has almost worked is adding padding to the destinations of the internal links, but they disable links that are just above them.

This is a frequent enough problem that one would expect a well-defined solution to be built into Bootstrap, but instead I’m seeing a plethora of workarounds.

Am I missing something?

Thanks! That did the trick for me, except at the very top, where the CSS recommended on that GitHub page,

body {
padding-top: 40px;
}

did the trick.

(At least in Chrome. I haven’t checked in other browsers yet, but I’m optimistic.)

1 Like