<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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 ----------> <nav class="navbar navbar-default navbar-doublerow navbar-trans navbar-fixed-top"> <!-- Master nav --> <!-- top nav --> <nav class="navbar navbar-top"> <div class="container"> <!-- left nav top --> <ul class="nav navbar-nav pull-left"> <li><a href="#"><span class="glyphicon glyphicon glyphicon-bold text-white"></span></a></li> <li><a href="#"><span class="glyphicon glyphicon-globe text-white"></span></a></li> <li><a href="#"><span class="glyphicon glyphicon-pushpin text-white"></span></a></li> </ul> <!-- right nav top --> <ul class="nav navbar-nav pull-right" style="padding:9px;"> <input type="text" class="" name="username" placeholder="Username"> <input type="text" class="" name="password" placeholder="Password"> <a href="#" class="btn btn-sm btn-success"><span class="glyphicon glyphicon-user"></span> Sign In</a> <a href="#" class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-certificate"></span> Register</a> </ul> </div> </nav> <!-- down nav --> <nav class="navbar navbar-down"> <div class="container"> <div class="flex-container"> <div class="navbar-header flex-item"> <div class="navbar-brand" href="#">Geek Connect</div> </div> <ul class="nav navbar-nav flex-item hidden-xs"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Forum</a></li> <li><a href="#">Contact</a></li> <li><a href="#">FAQ</a></li> </ul> <ul class="nav navbar-nav flex-item hidden-xs pull-right"> <li><a href="#" class=""></a></li> </ul> </div> </div> </nav> </nav> <!-- /master nav --> <div class="container"> <div class="row"> <div class="col-md-8"> <h3>Example heading <span class="label label-default">New</span></h3> </div> <div class="col-md-4"> </div> </div> </div>

.navbar-top { background: #4D5061; border-bottom: 4px solid #60B078; color: #FFF; } .text-white{ color:#fff; } .navbar-doublerow > .navbar{ display: block; padding: 0px auto; margin: 0px auto; min-height: 25px; } /*Down nav*/ .navbar-doublerow .navbar-down .navbar-brand { /*navbar brand*/ padding: 0px auto; float: left; color: #60B078; font-size: 30px; } .navbar-doublerow .navbar-down ul>li>a{ /*Menu items*/ font-size: 15px; color: #000; } .navbar-doublerow .navbar-down ul>li>a:hover{ /*menu hover*/ border-bottom: 1px solid #60B078; color: #60B078; }