Bootstrap Fixed NavBar with Spacing

Question

I am using two Navbars in my app which collapse individually in smaller screens. In Some Screens i will have two NavBars and in some only the top on.

By adding navbar-fixed-top to the navbar it sticks to the top but i want to stack them top of each other and the content of the page should be suitably spaced below so that it has visibility and does not hide below the navbars.

Link

Answer 1

To make the content of your page start below a fixed navbar you need to add a fixed height padding-top to the body (see http://getbootstrap.com/components/#callout-navbar-fixed-top-padding ). As you have either one or two navbars you'll need two classes with different heights and add one of them to the body .

To make the second navbar appear below the first navbar you can add a class like .navbar-fixed-top--secondary to it that gets a top: 50px .