arseniyandru arseniyandru - 1 year ago 100
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">

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download