[SOLVED] Why is my navbar covering next section/container?

I swear, this navbar will be the end of me.

Among other issues, I can’t seem to figure out why the navbar is overlapping with the container/section that follows.

Here’s my pen AND a video documenting my problem.

EDIT: I did notice that when I change the navbar container class from container-fluid to just the standard container that the overlap is resolved, but only when the display is wide. As I narrow the screen, the navbar once again swallows up content in the following section.

I’m not sure that I understand to what you are referring. However, try placing this in your css:
h2 { margin-top:10%; }

1 Like

Maybe this screen recording will help?

http://quick.as/w8wlu0yjj

Your navbar currently has fixed positioning. If you want to keep it fixed to the top of the browser window, you could add padding to the top of the “about” div. This is actually how this FCC forum handles the fixed nav.

If you want it to scroll with the content, you will have to change the positioning. I don’t know bootstrap too well, but the “navbar-fixed-top” class is definitely setting the fixed position so removing that would be a good starting point.

Check out this css-tricks article for more on css positioning if that is a stumbling block.

Great call on paying attention to the fixed-top class @csorrentino! I hadn’t realized the effect that was having.

Your answer helped me find the perfect solution. Apparently this question has been asked/answered a few hundred times, I was just asking it the wrong way. :grimacing:

For me, this looked like adding 40px padding to my body parameter.

body { padding-top: 40px; }

I’ll now change this query to [SOLVED]

Hi!

It is because the nav bar is fixed.

Try using scroll-padding-top in your html or body element:
https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/

Cheers