<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"> <div class="row"> <div class="navbar navbar-default meu-navbar"> <div class="container-fluid"> <div class="wrapper"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <div class="navbar-header"> <h1 class="nav-brand logo">L!</h1> </div> <li><a href="#">Category</a></li> <li><a href="#">Offers</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div> </div> </div>

@import url('https://fonts.googleapis.com/css?family=Oswald|Fjalla+One'); .meu-navbar{ color: #FFF; background-color: #F38630; border-bottom: solid 8px #da782b; } .wrapper{ width: 600px; margin: auto; } .logo{ font-family: 'Fjalla'; font-size: 45px; margin: auto; padding-top: 5px; } .navbar-default .navbar-nav > li > a { color: #FFF; font-family: 'Oswald'; font-size: 15px; }