Bootstrap navbar content overlap issue - fixed it

HTML-CSS
#1

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?

Original:

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?

Troubleshooting:
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.
http://codepen.io/howdythere/pen/QdRzgX

Side note venting: I now hate navbars.

1 Like
#2

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.

#3

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

#4

So I haven’t found a solution yet for the fixed top navbar but I’m really interested in the problem, because even if you add padding to the body it will not solve the content overlapping when you navigate down on the page to projects, for example. And I did not find a professional way to fix this. So please do tell me if you do :slight_smile: .

I looked at your project and wanted to recommend changing the links to your projects.
When you create a debug mode, it expires after a while so they can’t be accessed anymore. Try using the normal editor view link instead.

#5