arseniyandru arseniyandru - 2 months ago 9x
CSS Question

Bootstrap Fixed Navbar Behavior

Can somebody explain what is going on here?

I'm using bootstrap 3.3.7.

Why are

elements invisible?

<!-- Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="#">Big Brother</a>
<div class="navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#" href="/">Home</a></li>
<li><a href="#" href="/message">Messages</a></li>
<ul class="nav navbar-nav navbar-right">
<div class="container">


Your <h2> is not invisible, it's hiding behind your navbar.

You're using a navbar that uses fixed positioning. This takes it out of the normal document flow where it doesn't take up space so the elements after it begin to flow as if it wasn't there.

If you add padding-top: 50px; to <body> you will see your <h2>.

If you read through the Bootstrap Navbar Docs you'll notice a callout that says Body padding required.