"new-header"
Bootstrap 4.1.1 Snippet by Rajatsethi

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/media.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css"> <title>index</title> </head> <body> <header> <div class="top-bar"> <div class="container"> <div class="inner-top"> <div class="row align-items-center"> <div class="offset-lg-4 col-lg-8"> <div class="first-top-bar"> <div class="online-btn"> <a href="javascript:;">online shopping</a> </div> <div class="no-detail"> <p><span><i class="fa-solid fa-truck-fast"></i></span>Free shipping</p> <p><span><i class="fa-solid fa-phone"></i></span><a href="tel:+0123456789">0123456789</a></p> </div> </div> </div> <div class="offset-lg-4 col-lg-8"> <div class="search-detail"> <form class="d-flex form-box"> <input class="form-control" type="search" placeholder="Email" aria-label="Search"> <a href="javascript:;"><i class="fa-solid fa-magnifying-glass"></i></a> </form> </div> </div> </div> </div> </div> </div> <nav class="main-navbar navbar navbar-expand-lg "> <div class="container"> <a class="navbar-brand main-logo" href="#"><img src="images/logo.png" class="img-fluid" alt="logo"></a> <button class="navbar-toggler" href="#offcanvasExample" role="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample" > <span class="toggle-btn"> <i class="fa-solid fa-bars"></i></span> </button> <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasExample"><img src="images/logo.png" class="img-fluid" alt="logo"></h5> <button type="button" class="close-btn" data-bs-dismiss="offcanvas" aria-label="Close"><span class="toggle-btn"><span class=""><i class="fa-solid fa-x"></i></span></button> </div> <div class="offcanvas-body"> <ul class="navbar-nav ms-auto mb-2 mb-lg-0"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link"href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link"href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> </div> </div> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ms-auto mb-2 mb-lg-0"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link"href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link"href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> </div> </div> </nav> </header> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script> <script> $(document).ready(function () { $('.dropdown').hover(function () { $(this).addClass('show'); $(this).find('.dropdown-menu').addClass('show'); }, function () { $(this).removeClass('show'); $(this).find('.dropdown-menu').removeClass('show'); }); }); </script> </body> </html>
*{ margin: 0; padding: 0; box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin: 0; padding: 0; overflow-X:hidden ; font-family: "Roboto", sans-serif; } a, a:hover{ text-decoration: none; transition:all ease-in-out 0.3s; -webkit-transition:all ease-in-out 0.3s; -ms-transition:all ease-in-out 0.3s; -moz-transition:all ease-in-out 0.3s; } img{ max-width: 100%; } ul, li, p { margin: 0; padding: 0; list-style: none; } /*---------------------Header css Start---------------------------*/ .top-bar { background: #000; padding: 15px 0; } .first-top-bar { display: flex; align-items: center; justify-content: end; } .online-btn a { color: #fff; text-decoration: none; background: orange; padding: 10px 20px; border-radius: 100px; font-size: 16px; line-height: 20px; display: inline-block; } .online-btn a:hover { color: #fff; background: green; } .no-detail { display: flex; align-items: center; margin-left: 20px; } .no-detail p, .no-detail p a { color: #fff; margin: 0; font-size: 18px; line-height: 20px; margin-left: 20px; } .no-detail p a{ text-decoration: none; margin-left: 0px; } .no-detail p span { margin-right: 10px; } .search-detail { margin-top: 20px; } .search-detail .form-box { position: relative; } .search-detail .form-box input { position: relative; } .search-detail .form-box a { position: absolute; top: 50%; right: 0; transform: translateY(-50%); background: #fff; border-left: 1px solid #ced4da; padding: 6px 20px; border-radius: 5px; color: #000; } header { background: blueviolet; position: relative; } .main-navbar { background: brown; padding: 10px; position: unset !important; } .main-logo { position: absolute; top: 50%; transform: translateY(-50%); z-index: 9; margin: 0; } .main-logo img { width: 170px; } header .navbar-nav .nav-item .nav-link, header .right-nav .nav-item .nav-link { color: #FFF; font-size: 16px; font-weight: 300; font-style: normal; } header .offcanvas-header .offcanvas-title img { max-width: 100px; } .offcanvas-header .close-btn { border: 0; background: transparent; top: 15px; position: absolute; right: 15px; color: #ffffff; background: #00bdff; padding: 5px 10px; } .navbar-toggler { background-color: #fff !important; } header .offcanvas { background-color: #000000 ; } .navbar-toggler:focus { box-shadow: none !important; } /*---------------------Header css End---------------------------*/ @media(max-width:991px){ .main-logo { position: relative; top: unset; transform: unset; z-index: 9; margin: 0; } header { background: blueviolet; position: relative; display: flex; flex-direction: column-reverse; } }

Related: See More


Questions / Comments: