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>