December 7, 2021

Bootstrap responsive header menu

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

 

Leave a Reply

Your email address will not be published. Required fields are marked *