<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet"> <!--TOP-NAVBAR-END--> <nav class="top-bar"> <div class="container"> <div class="row"> <div class="col-sm-4 hidden-xs"> <span class="nav-text"> <i class="fa fa-phone" aria-hidden="true"></i> +123 4567 8900 <i class="fa fa-envelope" aria-hidden="true"></i> example@gmail.com </span> </div> <div class="col-sm-4 text-center"> <a href="#" class="social"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="#" class="social"><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href="#" class="social"><i class="fa fa-instagram" aria-hidden="true"></i></a> <a href="#" class="social"><i class="fa fa-youtube-play" aria-hidden="true"></i></a> <a href="#" class="social"><i class="fa fa-google" aria-hidden="true"></i></a> <a href="#" class="social"><i class="fa fa-dribbble" aria-hidden="true"></i></a> </div> <div class="col-sm-4 text-right hidden-xs"> <ul class="tools"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-globe" aria-hidden="true"></i> Language<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">English</a></li> <li><a href="#">Indonesia</a></li> </ul> </li> <li class="dropdown"> <a class="" href="#"><i class="fa fa-user" aria-hidden="true"></i> My Account</a> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-usd" aria-hidden="true"></i> Currency<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">USD</a></li> <li><a href="#">IDR</a></li> </ul> </li> </ul> </div> </div> </div> </nav> <!--====================== NAVBAR MENU START===================--> <nav class="navbar navbar-inverse"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav navbar-left"> <li class=""><a rel="nofollow" target="_blank" href="http://scadonsak.com/7bF">Home</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">About <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </li> <li><a href="#">services</a></li> <li><a href="#">gallery</a></li> <li><a href="#">blog</a></li> <li><a href="#">contact us</a></li> </ul> <form class="navbar-form navbar-right"> <div class="input-group"> <div class="input-group-btn"> <button class="btn btn-default-1" type="submit"> <i class="glyphicon glyphicon-search"></i> </button> </div> <input type="text" class="form-control" placeholder="Search"> </div> <span class="cart-heart hidden-sm hidden-xs"> <a href="#"><i class="fa fa-user" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-cart-plus" aria-hidden="true"></i></a> </span> <span class="cart-heart hidden-md hidden-lg"> <a href="#"><i class="fa fa-heart" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-cart-plus" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-user" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-globe" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-usd" aria-hidden="true"></i></a> </span> </form> </div> </div> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>

/*////////////////TOP NAV BAR////////////////*/ .top-bar{ background-color:black; min-height:40px; padding-top:5px; padding-bottom: 0px; } .top-bar .nav-text { color: #ffffff; display: block; margin-top: 5px; } .top-bar .social{ color:#FFF; display:inline-block; padding:5px; text-decoration: none; } .top-bar .tools{ margin:0px; padding:0px; list-style-type:none; } .top-bar .tools li{ list-style-type: none; display:inline-block; } .top-bar .tools li a { display: block; text-decoration: none; color: #009688; padding-left: 15px; padding-top: 5px; } .navbar-brand { height: 50px; padding: 3px 15px; font-size: 18px; line-height: 20px; position: absolute; z-index: 11; margin: 0 auto; right: 42%; } .navbar-inverse { background-color: #009688; border-color: #080808; } .navbar { position: relative; min-height: 50px; margin-bottom: 0px; border: 0px solid #000;; border-radius:0px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .navbar-inverse .navbar-nav > li > a { color: #fff; } .nav > li > a { position: relative; display: block; padding: 15px 11px; } .form-control{ border-color:#fff; border-radius:0px; background-color:transparent; } .btn-default-1 { color: #fff; background-color: transparent; border-color: #fff; border-radius: 0px; } .cart-heart a{ display:inline-block; color:#fff; font-size:20px; padding:5px; }