<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"> <h2>This is just a small snipp from the big free dark theme, <a href="http://getdarkstrap.com">Getdarkstrap.com</a></h2> <hr> </div> <nav class="navbar navbar-default"> <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">Menu</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.php">Brand</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="getting-started.php">Example</a></li> <li><a href="getting-started.php">Example</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown Example<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Link One</a></li> <li><a href="#">Link Two</a></li> <li><a href="#">Link Three</a></li> <li><a href="#">Link Four</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> </ul> </div> </div> </nav>

.navbar {background-color: #0B0B0B !important; border-color: transparent; border-radius: 0%; box-shadow: 0 0 6px 3px rgba(0,0,0,.35); } /** Default navbar **/ .navbar-default .navbar-nav>li>a { padding-top: 25px; padding-bottom: 25px; min-height: 69px; color: #A4A4A4;} .navbar-default .navbar-nav > li > a:hover {color: #DDBE42;} .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { background-color: transparent; color: #DDBE42; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { background-color: transparent; color: #DDBE42; } .navbar-default .navbar-nav .open .dropdown-menu { background-color: #060606 !important; box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4); } .navbar-default .navbar-nav .open .dropdown-menu > li > a{ color: #585858 !important; padding: 12px 12px 12px 12px !important; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #DDBE42 !important; background-color: transparent !important; } .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: #DDBE42 !important; background-color: transparent !important; } .navbar-default .navbar-toggle { border-color: transparent; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { border-color: transparent; background-color: transparent; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: transparent; } .navbar-form { padding-top: 10px !important;} .navbar-text { margin-top: 25px; } .navbar-default .navbar-text { color: #CBAF3B;} .navbar-default .navbar-brand { font-size: 21px; color: #CBAF3B; margin-top: 10px; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #DDBE42; }