Bootstrap navbar content overlap issue - fixed it

Bootstrap navbar content overlap issue - fixed it


So I’m an idiot. I just needed to add some padding to the top of the body. Issue fixed. I do wonder if that’s the ‘correct’ fix though?


I finally got my navbar to look the way I want it to (thanks to some help here). I’ve moved on to adding another section under the navbar but I’m again having issues.

short version:
There’s elements ‘hiding’ under my navbar. I need to add something or I’m missing something in my navbar section but I can’t figure out what. I followed a tutorial on w3schools then checked on the bootstrap site after I had problems. Things seem to match up.

In the examples I’ve seen, people just add elements after the </nav without issue. Perhaps I need to add rows/columns for the navbar? None of the examples I’ve seen use that though, even on the bootstrap site itself. I’m again confused. Any help?

I counted elements to make sure everything was properly closed.
If I add <p or <h1 elements under <section nothing shows up.
If try to add a background-image in CSS to the <section nothing shows up (probably another issue since the image is huge and should show up)
If I make the font-size for the <h3 element huge, it shows up.
If I add an <img element it does show up after the navbar and I can style it with CSS.
If I add <p element AFTER the <img it shows up.
Rmoving the aboutbg class doesn’t help.
Adjusting the margin or padding doesn’t work (at least that I’ve tried).

Things might look weird because I was playing around with sizing and commenting stuff out to troubleshoot.

Side note venting: I now hate navbars.


If you add some elements under the section you can’t see them but they are there under navbar because your navbar has class navbar-fixed-top this mean nav has position fixed so is taken out from document flow. To see elements just add inline style with background transparent.


Thanks. I was confusing fixed-top with static-top so that solved one issue.