<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 ----------> <!-- Fixed navbar --> <nav class="navbar navbar-default 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="/">Logo</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="#about">Home</a></li> <li><a href="#contact">Business</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="../navbar-static-top/">Become an Instructor</a></li> <li><a href="#">Login Signup</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav>

.navbar-default { background-color: #ffffff; border-color: #eeeeee; } .navbar-default .navbar-brand { color: #666666; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #099d5d; } .navbar-default .navbar-text { color: #666666; } .navbar-default .navbar-nav > li > a { color: #0aa863; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #666666; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #099d5d; background-color: #eeeeee; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #099d5d; background-color: #eeeeee; } .navbar-default .navbar-toggle { border-color: #eeeeee; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #eeeeee; } .navbar-default .navbar-toggle .icon-bar { background-color: #0aa863; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #0aa863; } .navbar-default .navbar-link { color: #0aa863; } .navbar-default .navbar-link:hover { color: #099d5d; } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #0aa863; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #099d5d; } .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: #099d5d; background-color: #eeeeee; } }