Absolute positioning of navbar in Twitter bootstrap 3

Question

The fixed navbar in bootstrap is not absolute in position. When using fixed navbars the markup below the navbars appears right on the header navbar. How to overcome this:

I tried position:absolute and also a margin from top equal to size of navbar header height. Nothing is working. Any suggestions?

Answer 1

Bootstrap provides option to be fixed at the top

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

reference: http://getbootstrap.com/components/#navbar-fixed-top OR You can use absolute to be fixed at the top and add same height navbar as body padding-top for example

.navbar{
  height: 50px;
}
body{
  padding-top: 50px;
}

Answer 2

In bootstrap 4, use fixed-top instead of navbar-fixed-top:

<nav class="navbar fixed-top navbar-light bg-faded">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>