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?

Issue with linking anchors within the same page

This issue is covered here for bootstrap navbars:

They have some CSS solutions and one with JavaScript. I think it’s hard to find a one-size-fits-all approach to this because it can depend on what you are linking to from your navbar. For me, this JavaScript solution has worked very well

// -55 compensates for 55px navbar height, modify as needed
window.addEventListener("hashchange", () => scrollBy(0, -55));


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