"Animation menu bar & Navbar"
Bootstrap 3.3.0 Snippet by iammahesh

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Wrap all page content here --> <div id="wrap"> <!-- Fixed navbar --> <div class="navbar navbar-default" data-spy="affix" id="navbar"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <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 class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#whoiam">Who I Am</a></li> <li><a href="#contact">contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> <div class="container"> <div class="page-header"> <h1>This is Smaple Contaent</h1> </div> <p>Web developers are found working in all types of organizations, including large corporations and governments, small and medium - sized companies, or alone as freelancers. Some web developers work for one organization as a permanent full-time employee,</p> </div> </div> <div class="footer"> <div class="container"> <p class="text-muted text-center"> <a href="http://bootsnipp.com/iammahesh" target="_blank">I Am Mahesh</a></p> </div> </div>
/* Sticky footer styles -------------------------------------------------- */ html, body { height: 100%; /* The html and body elements cannot have any padding or margin. */ } /* Wrapper for page content to push down footer */ #wrap { min-height: 100%; height: auto !important; height: 100%; /* Negative indent footer by its height */ margin: 0 auto -60px; /* Pad bottom by footer height */ padding: 0 0 60px; } /* Set the fixed height of the footer here */ #footer { height: 60px; background-color: #f5f5f5; } /* Custom page CSS -------------------------------------------------- */ /* Not required for template or sticky footer method. */ #wrap > .container { padding: 60px 15px 0; } .container .credit { margin: 20px 0; } #navbar { width: 100%; top:-60px; } #navbar.affix-top { position:fixed; top: 0px; -webkit-transition: all 0.8s ease; } #navbar.affix { position:fixed; top:0; bottom:60; -webkit-transition: all 1s ease; } #footer > .container { padding-left: 15px; padding-right: 15px; } code { font-size: 80%; }

Related: See More


Questions / Comments: