<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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="topbar dark topbar-padding"> <div class="container"> <div class="topbar-left-items"> <ul class="toplist toppadding pull-left paddtop1"> <li class="rightl">Customer Care</li> <li>(888) 123-4567</li> </ul> </div> <!--end left--> <div class="topbar-right-items pull-right"> <ul class="toplist toppadding"> <li><a href="https://www.facebook.com/superbwebdeveloper"><i class="fa fa-facebook"></i></a></li> <li><a href="https://twitter.com/superbdeveloper"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-google-plus"></i></a></li> <li><a href="#"><i class="fa fa-linkedin"></i></a></li> <li><a href="#" class=" btn btn-red-4 less-top-bottom-padding btn-round btn-small-2">Register</a></li> </ul> </div> </div> </div> <div class="clearfix"></div> <div id="header"> <div class="container-fluid nopadding"> <div class="navbar red-4 navbar-default yamm"> <div class="navbar-header"> <button type="button" data-toggle="collapse" data-target="#navbar-collapse-grid" class="navbar-toggle two three"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <div class="logo-box"><a href="index.html" class="navbar-brand less-top-padding"><img src="https://via.placeholder.com/125x43/FFFFFF" alt=""/></a></div> </div> <div id="navbar-collapse-grid" class="navbar-collapse collapse pull-right"> <ul class="nav red-4 navbar-nav"> <li><a href="#" class="dropdown-toggle">Home</a></li> <li><a href="#" class="dropdown-toggle active">About</a></li> <li><a href="#" class="dropdown-toggle">Services</a></li> <li><a href="#" class="dropdown-toggle">Portfolio</a></li> <li><a href="#" class="dropdown-toggle">Blog</a></li> <li><a href="#" class="dropdown-toggle">Contact</a></li> </ul> </div> </div> </div> </div>

.navbar-header .logo-box { width: 200px; height: 80px; padding: 0 0 0 20px; margin: 0px; float: left; background-color: #ed3325; } .navbar-collapse.pull-right { width: auto; } .navbar-header { float: left; } .navbar { margin-bottom: 0px; } .topbar.dark { background-color: #242424; } .topbar-left-items { float: left; margin: 0; padding: 0; width: 37%; } toplist.toppadding { padding-top: 10px; } .topbar-padding { padding: 7px 0 15px 0; } toplist { padding: 0px; margin: 0px; } .navbar-default { border: none; } .navbar-brand { float: left; font-size: 18px; height: 50px; line-height: 20px; padding: 16px 0 0; } .toplist li { float: left; color: #8d8c8c; text-align: right; font-size: 14px; margin: 0px; padding: 0 10px 0 10px; } ul { list-style-type: none; } .toplist.toppadding { padding-top: 10px; float: right; } .topbar-right-items { float: left; margin: 0; padding: 0; width: 37%; } .pull-right { float: right !important; } .toplist li a { color: #8d8c8c; } .topbar.dark .toplist li a:hover { color: #fff; } .btn.btn-red-4:hover { color: #fff; background-color: #f43819; } .btn.btn-red-4 { color: #fff; background-color: #f43819; } .btn.btn-round { border-radius: 2px; } .btn.btn-small-2 { padding: 4px 18px; }