Bootstrap 3 - STATIC NAVBAR with FIXED SUBNAV ... getting sticky?
Using Bootstrap 3 here. I'm trying to make an inverted NAVBAR that is "Static" (increases as the user scrolls down) with a SUBNAV loaded below it, which will become "fixed" when it reaches the top of the screen. If the user scrolls down again, NAVBAR should return. I'm not sure how you would call it.
Here's a non-working layout of this ...
+3
source to share
1 answer
Try this example.
http://www.bootply.com/HqtmsMHmuu
You need to use the Bootstrap affix component on yours subnav
and update the CSS accordingly when .affix
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()
}
});
+6
source to share