<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <div id="home" class="header"> <div class="container"> <div class="header-nav"> <nav class="navbar navbar-default"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="logo"> <h1><a class="navbar-brand" href="index.html"><br><i>Default</i></a></h1> </div> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="hvr-sweep-to-bottom active"><a href="index.html">Home</a></li> <li class="hvr-sweep-to-bottom"><a href="#about" class="scroll">About</a></li> <li class="hvr-sweep-to-bottom"><a href="#services" class="scroll">Services</a></li> <li class="hvr-sweep-to-bottom"><a href="#gallery" class="scroll">Gallery</a></li> <li class="hvr-sweep-to-bottom"><a href="#news" class="scroll">News</a></li> <li class="hvr-sweep-to-bottom"><a href="#contact" class="scroll">Contact Us</a></li> </ul> </div><!-- /.navbar-collapse --> </nav> </div> </div> </div>

/*-- header --*/ .logo { margin: 0.5em 0; padding:6px; } .navbar-brand { display: block; height: inherit; color: #fff !important; text-decoration: none; padding: 0; float: none; font-size: 0.9em; text-align: center; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #fff; background:#e2313d; } .logo h1 { margin: 0.5em 0; } .navbar-nav { float: right; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border: none; background: none; } .navbar-default { border: none; background: none; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{ color:#fff; background:#f44336; } .header { background-color: #1b1c1d; } .navbar-default .navbar-nav > li > a { color: #fff; font-size: 1.2em; font-weight: 300; letter-spacing: 1px; } .navbar { margin-bottom: 0; } .header-nav .nav > li > a { padding: 47px 20px; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #fff; }