Bootstrap navbar hiding top of content when used to jump to content

1

Okay, ignore how ugly my portfolio looks at the moment, I’m trying to get basic functions working before I pretty it up a bit…

But my navbar is currently hiding the top of my content when it is used to navigate to a content section:

I have looked around for solutions on this, and I’m finding conflicting advice on it.

How do I stop my navbar hiding content when I use it to navigate somewhere?

Note that I would like my navbar to still be visible wherever someone goes on the page, and that it’s fine where it is before someone starts using it to navigate

EDIT: Though I may also be having fun embedding external images in CodePen and not having them show up…

Edit 2: Sorted the image issue. So yeah: how do I stop my navbar hiding content?

2

Clicking on a link to a document fragment moves the top of that fragment to the very top of the page. The navbar is set to always display at the top of the page, no matter what. All you need to do is give your sections a top margin that will accommodate the navbar’s height. In Bootstrap, I think that’s 70px. I would give all of your sections a class (section would be a good choice) and then set the margin-top for that class:

.section {
    margin-top: 70px;
}
2 Likes
3

Thanks for that. I’ll give it a go.

4

Unfortunately, navigating via the buttons still appears to hide content even after applying that fix.

5

Hmmmm… let’s use padding instead.

.section {
    margin-top: -70px;
    padding-top: 70px;
}

It would also help to have your fragment IDs assigned to the sections rather than headers. So, the element you use right after your comments that split up each section would be a good place for the ID and section class.

 <!--About-->
    <div class="row section"  id="about">
      <div class="col-md-8">
        <h1>Creator of copy and code</h1>
3 Likes
6

Fantastic, this did work. Thank you so much. I’ve been trying to figure this out for days.

7

Me too! Thx for the solution @PortableStick !