Is <div> before Bootstrap Navbar Fixed Top possible?

Question

I've a navbar-fixed-top navigation on my HTML. I'm using this https://github.com/istvan-ujjmeszaros/bootstrap-autohidingnavbar to make the navigation 'smart'.

Now, I want to put a small <nav> before the actual navbar-fixed-top . But when I put the <nav> before the <navbar-fixed-top> , it appears after the actual navbar-fixed-top .

How can I make it so that it appears before the navbar-fixed-top ?

JSFiddle: http://jsfiddle.net/hfx24d8k/

Please help.

Answer 1

There's a couple of ways to do this, here is one option:

<nav class="navbar" style="position:fixed; top:0px">
    <div class="test">lorem ipsm</div>
</nav>
<nav class="navbar navbar-default navbar-fixed-top" style="top:20px">

Here's the fix applied to your fiddle:

http://jsfiddle.net/sifriday/hfx24d8k/1/

In your fiddle, the .navbar-fixed-top has position:fixed and top:0px to put it at the top of the screen. So first you need to move it down a bit to allow space for 'lorem ipsm', which you can do with the inline style 'top:20px'.

Next you need to move lorem ispm up. Currently there is 60px padding on the body, so the easiest way to move it up is to make your second nav also be fixed, and move it above the main nav, with the inline styles "position:fixed; top:0px"

Alternatively, you could remove the padding from the body and let the browser position it at the top of the screen. The class .navbar applies position:relative so you need to override this by setting position:static on the lorem ispm nav.

Answer 2

Something like this

 <nav style=" 
      position: fixed;
      width: 100%;
      top: 0%;
      background-color:red;">
        <div class="test">lorem ipsm</div>
 </nav>

Fiddle http://jsfiddle.net/hfx24d8k/4/