"2 Level responsive Marque navbar"
Bootstrap 3.3.0 Snippet by ttorrez

<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="navbar navbar-default navbar-tt navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-ex-collapse"> <span class="sr-only">Toggle navigation</span> <i class="fa fa-reorder"></i> </button> <a class="navbar-brand"> <img alt="Brand" src="http://torrezracing.com/images/samplehd.png" width="172" height="80"></a> </div> <div class="collapse navbar-collapse" id="navbar-ex-collapse"> <div> <ul class="nav navbar-nav nav-tt navbar-right navbar-uppr"> <li class="active"> <a href="#"><i class="fa fa-2x fa-facebook-official fa-fw text-white"></i></a> </li> <li> <a href="#"><i class="fa fa-2x fa-fw fa-twitter text-white"></i></a> </li> <li> <a href="#"><i class="fa fa-2x fa-fw fa-linkedin-square text-white"></i></a> </li> <li> <a href="#"><i class="fa fa-2x fa-fw fa-google-plus-square text-white"></i></a> </li> <li> <a href="#"><i class="fa fa-2x fa-fw fa-youtube text-white"></i></a> </li> </ul> </div> <ul class="nav navbar-nav nav-tt navbar-right navbar-lwr"> <li class="active"> <a href="#">Home</a> </li> <li> <a href="#">Our Story</a> </li> <li> <a href="#">More</a> </li> <li> <a href="#">Gallery</a> </li> <li> <a href="#">Contact Us</a> </li> </ul> </div> </div> </div> <div class="section"> <div class="container"> <div class="row"> <div class="col-md-12"> <h1 class="text-center">Resize Browser <small> <br>to see the magic happen</small> </h1> </div> </div> </div> </div>
@import url('http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css'); .navbar-tt { background-color: hsl(0, 69%, 22%) !important; background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b42121", endColorstr="#5e1111"); background-image: -khtml-gradient(linear, left top, left bottom, from(#b42121), to(#5e1111)); background-image: -moz-linear-gradient(top, #b42121, #5e1111); background-image: -ms-linear-gradient(top, #b42121, #5e1111); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b42121), color-stop(100%, #5e1111)); background-image: -webkit-linear-gradient(top, #b42121, #5e1111); background-image: -o-linear-gradient(top, #b42121, #5e1111); background-image: linear-gradient(#b42121, #5e1111); border-color: #5e1111 #5e1111 hsl(0, 69%, 17%); color: #fff !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33); -webkit-font-smoothing: antialiased; } .navbar-tt .navbar-nav > .active > a, .navbar-tt .navbar-nav > .active > a:hover, .navbar-tt .navbar-nav > .active > a:focus { color:#333; background-color: transparent; } .navbar-tt .navbar-collapse, .navbar-tt .navbar-form { border-color: #FFCC00; border-style: none; color: #4C4C4C; } .navbar-tt .navbar-toggle { border-color: #797878; color: #797878; } .navbar-tt .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { background-color: #C0C0C0; } .collapse.in { } .text-white { color: #FFF; } .navbar-toggle { position: absolute; left: 50px; margin-left: 50%; padding: 0px 4px; margin-top: 5px; margin-bottom: 8px; background-color: #9C9C9C; background-image: none; border: 1px solid transparent; border-radius: 4px; } .navbar-lwr { top: 0px; position: relative; display: block; margin-right: 0px; } .navbar-uppr { display:flex; margin-top: 30px; } .navbar-brand { float:none; padding-top: 2px; height: 50px; display: block; } .navbar-brand > img { display: block; margin-left: auto; margin-right: auto; } .fa-fw { width: 0.8em; } @media (min-width: 768px) { .navbar-uppr { margin-top: 0px; } .navbar-lwr { top: 45px; position: relative; display: block; margin-right: -325px; } .nav-tt > li { border-top: thin #5A0008 none; } .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; } .fa-fw { width: 1.28571429em; } }

Related: See More

Questions / Comments: