<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 ----------> <div class="container-fluid"> <div class="row-fluid"> <div class="col-md-12"> <nav role="navigation" class="bsus-navbar navbar navbar-default"> <!-- Brand and toggle get grouped for better mobile display--> <div class="navbar-header"> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="#bs-pg-top" class="navbar-brand bs-pg-scroll"><span> <div style="width: 129px; height: 129px; border: 1px solid green;"></div> <!--img.img-responsive(src='img/logo-rev.png', alt='')--></span></a> </div> <!-- Collect the nav links, forms, and other content for toggling--> <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#bs-about" class="bs-pg-scroll">About</a></li> <li><a href="#bs-services" class="bs-pg-scroll">Locations</a></li> <li><a href="#bs-faqs" class="bs-pg-scroll">FAQs</a></li> <li><a href="#bs-contact" class="bs-pg-scroll">Contact Us </a></li> <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Class Schedule <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#" data-toggle="modal" data-target="#schedule-modal">2017</a></li> </ul> </li> <li><a href="#" data-toggle="modal" data-target="#registration-modal">Register Online</a></li> <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Information <b class="caret"> </b></a> <ul class="dropdown-menu"> <li><a href="#" data-toggle="modal" data-target="#bringtoclass-modal">What to bring to class</a></li> <li><a href="#" data-toggle="modal" data-target="#ourrates-modal">Our Rates</a></li> <li><a href="#" data-toggle="modal" data-target="#homework-modal">Homework</a></li> <li><a href="#" data-toggle="modal" data-target="#notsosafe-modal">Boat (Not so Safe) Videos</a></li> <li class="divider"></li> <li><a href="#" data-toggle="modal" data-target="#employment-modal">Employment Opportunities</a></li> <li class="divider"></li> <li><a href="#" data-toggle="modal" data-target="#certificate-modal">Where is my certificate?</a></li> <li class="divider"></li> <li><a href="#" data-toggle="modal" data-target="#giftcertificate-modal">Gift Certificates </a></li> </ul> </li> </ul> </div> </nav> </div> </div> </div>

.bsus-navbar { background-color: #086ea8; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #FFFFFF; background-color: transparent; } .navbar-default .navbar-nav > li > a { color: rgba(255, 255, 255, 0.7); } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #FFFFFF; background-color: transparent; /* original gray for active */ } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #FFFFFF; background-color: transparent; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { /*background-color: #1A242F;*/ /*color: #FFFFFF;*/ } .navbar-default .navbar-nav .dropdown-menu > li > a { /* drop down selection */ }