Multiple fixed top navbar headers in Twitter Bootstrap 3

Question

• Bootstrap 3.02

I would like to have 2 fixed to top navbars similair to how Joomla! 3 implements their browse screen.

And then once you scroll navbar #2 butts up against the top one:

I have looked at:

• Bootstrap 3 multiple navbars
• https://groups.google.com/forum/#!topic/twitter-bootstrap-stackoverflow/aAGJKArh-8E

but trying multiple snippets I cannot get this to work. Can anyone help with a working demo in jsFiddle?

Answer 1

The code below is a basic start using two navbars and affix.

HTML

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">   <div class="container">     <div class="navbar-header">       <a class="navbar-brand" href="#">Brand</a>     </div>     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">       <ul class="nav navbar-nav">         <li class="dropdown">           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>           <ul class="dropdown-menu">             <li><a href="#">Action</a></li>             <li><a href="#">Another action</a></li>             <li><a href="#">Something else here</a></li>             <li class="divider"></li>             <li><a href="#">Separated link</a></li>             <li class="divider"></li>             <li><a href="#">One more separated link</a></li>           </ul>         </li>         <li class="dropdown">           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>           <ul class="dropdown-menu">             <li><a href="#">Action</a></li>             <li><a href="#">Another action</a></li>             <li><a href="#">Something else here</a></li>             <li class="divider"></li>             <li><a href="#">Separated link</a></li>             <li class="divider"></li>             <li><a href="#">One more separated link</a></li>           </ul>         </li>       </ul>     </div>   </div><!-- /.container-fluid --> </nav> <div class="divide-nav">   <div class="container">     <p class="divide-text">Some Text Here</p>   </div> </div> <nav class="navbar navbar-default navbar-lower" role="navigation">   <div class="container">     <div class="collapse navbar-collapse collapse-buttons">       <form class="navbar-form navbar-left" role="search">         <button class="btn btn-success">Button</button>         <button class="btn btn-default">Button</button>         <button class="btn btn-default">Button</button>         <button class="btn btn-default">Button</button>       </form>     </div>   </div> </nav> <div class="container">   <div class="row">     <div class="filler"></div>   </div> </div> 

CSS

body{   margin-top: 50px; }  .divide-nav{   height: 50px;   background-color: #428bca; }  .divide-text{     color:#fff;     line-height: 20px;     font-size:20px;     padding: 15px 0; }  .affix {   top: 50px;   width:100%; }  .filler{   min-height: 2000px; }  .navbar-form {    padding-left: 0; }  .navbar-collapse{    padding-left:0;  } 

JavaScript

$('.navbar-lower').affix({   offset: {top: 50} });