Nav bar covering section titles

Nav bar covering section titles
0

#1

Hi all,

I’m working on my portfolio page and have run into some issues where when I click a link to one of my page sections on the nav bar, it jumps to that section but covers over the title. For instance, if you click “about me,” it will show that section, but won’t show the h2 title text. Does anyone know how to fix this?

Any other feedback you may have is also welcome. It’s still a work in progress.

Thanks!

See the Pen Portfolio Page by Andrew (@pantarhei6) on CodePen.


#2

One fix is to add some space between the section’s top border and the section heading. You can add margin-top: 50px to the section heading.

Also I don’t see the intended background. What I see is the logo of pixabay.


#3

Hi,
I’ve fixed this myself earlier this week:
Put
body{
padding-top: 80px;
}
and
#aboutme {
color:white;
background:rgba(225, 255, 255, .05);
border-radius:20px;
margin: -80px 10px 20px 10px;
padding-top: 80px;
height: 150px;
}

and
#portfolio{
color:white;
background:rgba(225, 255, 255, .05);
border-radius:20px;
margin: -80px 10px 20px 10px;
padding:80px 0px 0px 0px;
height:800px;
}

You need to play around with the margin top settings you have; I wouldn’t use too many.

I’ve got a problem myself though: I can get the navbar to work on the desktop and with Android, but not on a iPad. I’ve got ScrollSpy working working too, but again, not on an iPad.
My issue - getting the bootstrap navbar to stay fixed and work on an iPad