<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Portfolio</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li>
<a href="#">Projects</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">Tools</a></li>
</li>
</div>
Collapsible Navbar
In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
Only when the button is clicked, the navigation bar will be displayed.