Div under fixed top bar

Question

I want a fixed top bar, with content below. However, if I don't set the margin top the content of this div will be placed under the fixed top bar.

<nav class="navbar navbar-default navbar-fixed-top">
    <div id="navbar" class="navbar-collapse collapse"></div>
    </div>
</nav>
<div class="container">
     <h1>Navbar example</h1>
     <h1>Navbar example</h1>
     <h1>Navbar example</h1>
     <h1>Navbar example</h1>
     <h1>Navbar example</h1>
</div>

Set a margin top is the correct way, or there is some way in boostrapt to make this?

http://jsfiddle.net/5f5g3mu0/

Answer 1

See the Docs.

The fixed navbar will overlay your other content, unless you add padding to the top of the . Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

body {
    padding-top:70px;
}