Bootstrap 3 Multiple Navbars

Multiple fixed top navbar headers in Twitter Bootstrap 3

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}
});

Multiple fixed top navbar headers in Twitter Bootstrap 3 not working properly?

You used navbar-static-top for your second navbar. You have to use navbar-fixed-top for both navbars so they stay at the top of the page when you scroll. You will also have to add some space (equal to the height of the first navbar) from the top for the second navbar (equal to the height of the first navbar) to avoid overlapping, like this: top:50px;
Here is an update of your code on Bootply: http://www.bootply.com/Xd04ROsODx

How can i have multiple Navbars in a page

You have to remove navbar-fixed-top from the second nav

html would be like this

    <div class="navbar navbar-inverse navbar-fixed-top">
   <div class="navbar-inner">
     <div class="container">

   <a class="brand" href="#">Project name</a>
    <div class="nav-collapse collapse">
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
        </div><!--/.nav-collapse -->
        </div>
     </div>
   </div>

      <div class="container">

  <h1>Conent</h1>
  <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>

   </div> <!-- /container -->
   <div class="navbar ">
  <div class="navbar-inner">
    <div class="container">

  <div class="nav-collapse collapse">
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
   </div><!--/.nav-collapse -->
   </div>
   </div>
    </div>

in bootply

Multiple navbars on the same page with Twitter's Bootstrap 3

Although navbars are meant for singular use you are free to use more as one navbar per page. Multiple navbars on the same page will have the same z-index (1000) so dropdowns may overlap. When using more navbars give each an different z-index (and id). The second z-index should to be lower than the first one, etc.

B.e. with having navbars like:
<nav id="navbar1" class="navbar" role="navigation">
<nav id="navbar2" class="navbar" role="navigation">
<nav id="navbar3" class="navbar" role="navigation">
<nav id="navbar4" class="navbar" role="navigation">

set the z-indexes by:

#navbar2 {z-index:999;}
#navbar3 {z-index:998;}
#navbar4 {z-index:997;}

---

Related Topics