Bootstrap Fixed Navbar Behavior

Question

Can somebody explain what is going on here?

I'm using bootstrap 3.3.7.

Why are .container elements invisible?

    <!-- Navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Big Brother</a>
        </div>
        <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>
            <ul class="nav navbar-nav navbar-right">
                <li>something</li>
            </ul>
        </div>
    </div>
    <div class="container">
        <h2>Invisible</h2>
    </div>

hungerstar · Accepted Answer · 2016-08-17 18:23:10Z

2

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.

answered Aug 17, 2016 at 18:23

hungerstar

21.8k6 gold badges52 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

arseniyandru Over a year ago

So, I should always pad my body by the size of nav bar? If it is fixed-top

hungerstar Over a year ago

At the minimum, yes. Bootstrap's navbar starts at a height of 50px. It's up to you if you'd like a little extra padding or not.

Collectives™ on Stack Overflow

Bootstrap Fixed Navbar Behavior

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related