<section class="header-top d-none-lg">
<div class="container">
<div class="header-top-inner">
<div class="row">
<div class="col-md-8 col-sm-12">
<div class="header-item display-md-none">
<i class="fa fa-clock-o"></i>
<h4>Sat-Tues: 11:00am-02:00pm</h4>
<p>Also open in holiday</p>
</div>
<div class="header-item hea-left">
<i class="fa fa-envelope"></i>
<h4>support@popular.com</h4>
<p>Feel free to ask any question</p>
</div>
<div class="header-item hea-left">
<i class="fa fa-phone"></i>
<h4> (800) 0123 4567 890</h4>
<p>24/7 days dedicated support</p>
</div>
</div>
<div class="col-lg-4 col-md-3">
<div class="header-item-right">
<a href="#">inquery today</a>
</div>
</div>
</div>
</div>
</div>
</section>
<header class="">
<div class="container">
<div class="float-left logo"><img src="https://www.tolmatol.com/uploads-images/bootstrap-responsive-header-menu/logo-dark.png" alt=""></div>
<nav class="navbar navbar-expand-lg d-inline-block float-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#tolmatol-navbar" aria-controls="tolmatol-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="menu-icon"></span>
<span class="menu-icon"></span>
<span class="menu-icon"></span>
</button>
<div class="collapse navbar-collapse" id="tolmatol-navbar">
<ul class="navbar-nav ml-auto ">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Listing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Pages
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Extra</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tutorial</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact us</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="slider"> <img src="https://www.tolmatol.com/uploads-images/bootstrap-responsive-header-menu/banner.jpg" alt="" width="100%"> </div>
<div class="page"></div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500&display=swap');
.header-top .header-top-inner {
border-bottom: 1px solid #ebebeb;
display: block;
overflow: hidden;
padding-bottom: 10px;
padding-top: 20px;
}
.header-top .header-top-inner .header-item {
float: left;
width: 33.33%;
}
.btn-primary, .btn-primary:hover {
color: #fff;
background-color: #6b0ef6;
border-color: #6200f5;
}
.header-top .header-top-inner .header-item i::before {
float: left;
margin-right: 11px;
font-size: 25px;
line-height: 25px;
color:#9c27b0;
}
.header-top .header-top-inner .header-item h4 {
color: #06223e;
font-size: 13px;
font-weight: 500;
margin-bottom: 0px;
}
.header-top .header-top-inner .header-item p {
color: #a5a5a5;
font-size: 12px;
line-height: 22px;
margin: 0;
}
.header-item.hea-left {
padding-left: 5px;
}
.header-item-right a {
background: #9C27B0 none repeat scroll 0 0;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1);
color: #ffffff;
float: right;
font-size: 14px;
font-weight: 500;
height: 40px;
padding-top: 7px;
text-align: center;
text-transform: uppercase;
transition: all 0.4s ease-in-out 0s;
width: 136px;
line-height: 26px;
}
.display-md-none { display: block;}
.header-top .header-top-inner .header-item i {
float: left;
}
body { font-family: 'Poppins', sans-serif; font-size: 14px;}
header { width: 100%; z-index: 9999; color: #fff; transition: all 1s;}
header .logo { max-width: 130px;}
header .logo img { width: 100%;}
#tolmatol-navbar ul li { margin: 0px 5px;}
#tolmatol-navbar ul li a { color: #333; font-size: 16px; font-weight: 500;}
.inner-page { height: 300px;}
header.navScroll { margin-top: -100px; }
header.navScroll.fixed { margin-top: 0px; position: fixed; top: 0px; background:#fff;}
header.navScroll.fixed #tolmatol-navbar ul li a { color: #333; font-weight: 500; font-size: 16px;}
header.navScroll.fixed .logo { margin: 12px 15px; font-size: 22px; color: #333}
a.dropdown-item { color: #333;}
.page { min-width: 100%; height: 450px;}
header.navScroll.fixed .logo img {
width: 90px;
}
@media(max-width:991px) {
.navbar-toggler { background: #9c27b0; padding-bottom: 0;}
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) { outline: none; box-shadow: none;}
.menu-icon { width: 30px;
height: 3px;
background: #fff;
display: block;
margin: 2px 0px 7px;
line-height: 45px;}
#tolmatol-navbar ul li a { color: #333;}
.navbar-collapse{
background: #fff; padding: 0px 40px;
width: 100%;
display: block;
float: left;
position: fixed;
right: 0;
}
.header-top .header-top-inner .header-item { width: 50%; text-align: center;}
.display-md-none { display: none;}
}
@media(max-width:767px){
.header-top .header-top-inner .header-item { width:100%; text-align: center;}
.header-item-right {
text-align: center;
margin: auto;
width: 100%;
display: flex;
justify-content: center;
margin: 20px 0px;
}
}
@media(max-width:1199px){
.header-top .header-top-inner .header-item i {
float: left;
float: none;
text-align: center;
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 8px;
}
}
</style>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(window).scroll(function(){
var header = $('header');
scroll = $(window).scrollTop();
if (scroll >= 50) header.addClass('fixed');
else header.removeClass('fixed');
if (scroll >= 25) header.addClass('navScroll');
else header.removeClass('navScroll');
});
</script>
