2
I’ve been looking for a way to make a navbar
bootstrap 3 has a behavior similar to Google+ navbar, when scrolling down it gets smaller and displays in place of menus with icon and title only menus with icon, when returning to the top it takes the initial style.
For example, by default my navbar has 47px
, when giving scroll she would be with some 30px
.
Code of my navbar for example:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#"><i class="fa fa-home"></i> Home</a>
</li>
<li>
<a href="#about"><i class="fa fa-question"></i> About</a>
</li>
</ul>
</div>
</div>
</nav>
maybe this pen will help you, http://codepen.io/haykou/pen/FHKJg
– haykou