Bootstrap Navigation Bar With Animated Icons



Many times we require the responsive menu button for mobile phones. There are several ways in which you can make this bootstrap navigation bar icon but I will tell you the best and the easiest way to build this button. In this tutorial, we’ll learn how to create animated toggle button of bootstrap navigation using bootstrap, html, css, and javascript.

HTML

<nav class="navbar white navbar-default">
  <div class="logo"></div>
	<div class="container-fluid">
	 <div class="navbar-header">
	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".mainnav" aria-expanded="false" aria-controls="navbar">
	  <span class="icon-bar"></span>
	  <span class="icon-bar"></span>
	  <span class="icon-bar"></span>
	</button>
	  </div>
	  <div id="navbar" class="navbar-collapse collapse mainnav">
		<ul class="nav navbar-nav">
		  <li><a class="scroller" href="#proj-head">projects</a></li>
		  <li><a href="#section3">studio</a></li>
		  <li><a href="#section4">press</a></li>
		  <li><a href="#section6">Contact</a></li>
		  <li><a href="#"><i class="fa fa-linkedin"></i></a></li>          
		  <li><a href="#"><i class="fa fa-instagram"></i></a></li>
		</ul>
	  </div><!--/.nav-collapse -->
	</div><!--/.container-fluid -->
  </nav>

CSS

.navbar-toggle .icon-bar:nth-of-type(3) {
  top: 2px;
}
.navbar-toggle .icon-bar {
  position: relative;
  transition: all 500ms ease-in-out;
}
.navbar-toggle.active .icon-bar:nth-of-type(1) {
  top: 6px;
  transform: rotate(45deg);
}
.navbar-toggle.active .icon-bar:nth-of-type(2) {
  background-color: transparent;
}
.navbar-toggle.active .icon-bar:nth-of-type(3) {
  top: -6px;
  transform: rotate(-45deg);
}

JQUERY

$(document).ready(function () {
 $(".navbar-toggle").on("click", function () {
	$(this).toggleClass("active");
 });
});

 

You may want to take a look at the following related posts:

Also for more awesome tutorials, please don’t forget to like our facebook page TryCatch Classes.
Bonus: We also give training on following topics:

                       1. Angular Training in Mumbai.

2. Bootstrap Training Course in Mumbai.

3.  Web Designing Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.