CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
arseniyandru
arseniyandru

Reputation: 798

Bootstrap Fixed Navbar Behavior

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>

Upvotes: 1

Views: 123

Answers (1)

hungerstar
hungerstar

Reputation: 21675

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.

Upvotes: 2

Related Questions