<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;
}
