Bootstrap 3.3.0 Snippet by CDJangra

<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-fixed-top" role="navigation"> <div class="top-navbar"> <div class="container"> <div class=" row"> <div class="social-media col-sm-4"> Stay connected: <ul> <li><a href="#" class="fb"><img src="img/fb.png" alt="" width="7" height="12"></a></li> <li><a href="#" class="fb"><img src="img/twitter.png" alt=""></a></li> <li><a href="#" class="fb"><img src="img/dribbble.png" alt=""></a></li> <li><a href="#" class="fb"><img src="img/google-plus.png" alt=""></a></li> </ul> </div> <div class="user-link col-sm-8"> <a class="tel" href="tel:+201234567891"><i><img src="img/phone.png" alt=""></i>+201234567891</a> <a class="mailto-email" href="mailto:support@resalatheme.com"><i><img src="img/email-id.png" alt=""></i>support@resalatheme.com</a> <div class="hed-search-form"> <!--<input placeholder="" name="" class="form-control" type="text">--> <input class="search-btn" name="" type="button"> <div class="search-form-popup" id="search-form_popup"> <div class="close_btn"><i class="fa fa-times" aria-hidden="true"></i></div> <form class="form-searching" action="" method="get"> <input placeholder="Search" name="" class="form-control" type="text"> <button class="search-form_button" type="submit" value="Search"><i class="fa fa-search" aria-hidden="true"></i> </button> </form> </div> </div> </div> </div> </div> </div> <div class="container"> <div class="navbar-header page-scroll"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand page-scroll" href="#page-top"><img src="img/logo.png" class="img-responsive" alt=""></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav navbar-right"> <!-- Hidden li included to remove active class from about link when scrolled up past about section --> <li class="active"> <a class="page-scroll" href="#page-top">Home</a> </li> <li> <a class="page-scroll" href="#about">About</a> </li> <li> <a class="page-scroll" href="#services">services</a> </li> <li> <a class="page-scroll" href="#contact">Contact</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i'); nav.navbar-default { background: #ffffff none repeat scroll 0 0; border: medium none; font-family: 'Open Sans', sans-serif; } .navbar { margin: 0; padding: 0; } .navbar { padding: 20px 0; transition: background 0.5s ease-in-out 0s, padding 0.5s ease-in-out 0s; } .top-navbar { background: #282828 none repeat scroll 0 0; color: #d6d6d6; padding: 5px 0; } .social-media > ul { display: inline-block; list-style: outside none none; margin: 0 0 0 5px; padding: 0; } .social-media > ul li { display: inline-block; margin: 0 1px; opacity: 0.8; text-align: center; } .social-media > ul li a { display: inline-block; text-align: center; width: 12px; } .user-link { text-align: right; } .user-link a { color: #888888; margin: 0 10px; } .search-btn { background: rgba(0, 0, 0, 0) url("../img/search_btn.png") no-repeat scroll center center; border: medium none; height: 20px; padding: 0; width: 20px; } .user-link a i { margin-right: 10px; } .search-form-popup { background: #333333 none repeat scroll 0 0; display: none; height: 100%; left: 0; padding: 60px; position: fixed; top: 0; transition: all 0.5s ease 0s; width: 100%; z-index: 99; } .navbar-brand { height: auto; } .navbar-default .nav.navbar-nav { margin: 24px 0; } .carousel, .item, .active { height: 100%; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover { background-color: rgba(0, 0, 0, 0); color: #999404; }

Related: See More

Questions / Comments: