Bootstrap 3 – STATIC NAVBAR with FIXED SUBNAV…becomes sticky

navbartwitter-bootstrap-3

Using Bootstrap 3 here. I'm trying to make an inverted NAVBAR that is "Static" (goes up when user scrolls down) with a SUBNAV that is loaded underneath it that will become "Fixed" when it reaches the top of the screen. If the user scrolls up again, the NAVBAR should come back. I'm not sure what you would call this.

Here's a non-working mockup of this…

http://jsbin.com/xagetaloyago/2/edit

Best Solution

Try this example..

http://www.bootply.com/HqtmsMHmuu

You need to use Bootstrap's affix component on your subnav, and update the CSS accordingly for when the .affix is applied to the subnav.

CSS

.navbar {
    margin-bottom:0;
}

.subnav {
   margin:0;
  top: 0px;
  z-index: 1020;
  background-color: rgb(247,247,247); 
  border-bottom: 1px solid #E1E1E1;
  padding: 8px 0px 0px 0px;
}

.subnav.affix {
    position: fixed;
    top: 0;
    width: 100%;
    z-index:10;
}

HTML

<div id="navtop">
  <div class="navbar navbar-inverse navbar-static-top">
    <div class="container">
      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a href="#" class="navbar-brand">Brand</a>
      <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="glyphicon glyphicon-bar"></span>
        <span class="glyphicon glyphicon-bar"></span>
        <span class="glyphicon glyphicon-bar"></span>
      </a>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
        <ul class="nav pull-right navbar-nav">
          <li>
            <form class="navbar-form">
              <input type="text" class="form-control" placeholder="Search">
              <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
            </form>
          </li>
          <li>
            <a href="#"><span class="badge">2</span></a>
          </li>
        </ul>
      </div>        
    </div>
  </div><!-- /.navbar -->
</div>          

<!-- subnav here -->
<div class="navbar subnav" role="navigation">
    <div class="navbar-inner">
        <div class="container"> 
        <ul class="pager subnav-pager"> 
            <div class="btn-group-wrap">
                <button type="button" class="btn btn-success">sub 1</button>
                <button type="button" class="btn btn-success">sub 2</button>
             </div>         
        </ul>   
</div>
</div>
</div>

JS

$('.subnav').affix({
      offset: {
        top: $('#navtop').height()
      }
});
Related Question