Header Style 3
Copy
<header class="site-header mo-left header style-3"> <!-- Main Header --> <div class="sticky-header main-bar-wraper"> <div class="main-bar clearfix"> <div class="container-fluid clearfix"> <!-- Nav Toggle Button --> <button class="menu-nav-btn collapsed" data-bs-toggle="collapse" type="button" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="for-dots"> <span></span> <span></span> <span></span> <span></span> </span> <span class="dots-close"> <svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="20" height="2.10526" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 22.0635 20.561)" fill="white"/> <rect x="6.43262" y="20.5611" width="20" height="2.10526" transform="rotate(-45 6.43262 20.5611)" fill="white"/> </svg> </span> </button> <!-- Website Logo --> <div class="logo-header me-5"> <a href="index.html"> <img src="images/logo.svg" class="logo-dark" alt="logo"> <img src="images/logo-white.svg" class="logo-light" alt="logo"> </a> </div> <!-- EXTRA NAV --> <div class="extra-nav"> <div class="extra-cell"> <ul class="header-right"> <li class="nav-item login-link"> <a class="nav-link" href="registration.html"> Login / Register </a> </li> <li class="nav-item search-link"> <a class="nav-link" href="javascript:void(0);" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"> <path d="M9.16667 15.8333C12.8486 15.8333 15.8333 12.8486 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M17.5 17.5L13.875 13.875" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </a> </li> <li class="nav-item wishlist-link"> <a class="nav-link" href="javascript:void(0);" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"> <path d="M17.3666 3.84172C16.941 3.41589 16.4356 3.0781 15.8794 2.84763C15.3232 2.61716 14.727 2.49854 14.1249 2.49854C13.5229 2.49854 12.9267 2.61716 12.3705 2.84763C11.8143 3.0781 11.3089 3.41589 10.8833 3.84172L9.99994 4.72506L9.1166 3.84172C8.25686 2.98198 7.0908 2.49898 5.87494 2.49898C4.65907 2.49898 3.49301 2.98198 2.63327 3.84172C1.77353 4.70147 1.29053 5.86753 1.29053 7.08339C1.29053 8.29925 1.77353 9.46531 2.63327 10.3251L3.5166 11.2084L9.99994 17.6917L16.4833 11.2084L17.3666 10.3251C17.7924 9.89943 18.1302 9.39407 18.3607 8.83785C18.5912 8.28164 18.7098 7.68546 18.7098 7.08339C18.7098 6.48132 18.5912 5.88514 18.3607 5.32893C18.1302 4.77271 17.7924 4.26735 17.3666 3.84172Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </a> </li> <li class="nav-item cart-link"> <a href="javascript:void(0);" class="nav-link cart-btn" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"> <g clip-path="url(#clip0_67_234)"> <path d="M7.49984 18.3334C7.96007 18.3334 8.33317 17.9603 8.33317 17.5001C8.33317 17.0398 7.96007 16.6667 7.49984 16.6667C7.0396 16.6667 6.6665 17.0398 6.6665 17.5001C6.6665 17.9603 7.0396 18.3334 7.49984 18.3334Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M16.6668 18.3334C17.1271 18.3334 17.5002 17.9603 17.5002 17.5001C17.5002 17.0398 17.1271 16.6667 16.6668 16.6667C16.2066 16.6667 15.8335 17.0398 15.8335 17.5001C15.8335 17.9603 16.2066 18.3334 16.6668 18.3334Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M0.833496 0.833252H4.16683L6.40016 11.9916C6.47637 12.3752 6.68509 12.7199 6.98978 12.9652C7.29448 13.2104 7.67575 13.3407 8.06683 13.3333H16.1668C16.5579 13.3407 16.9392 13.2104 17.2439 12.9652C17.5486 12.7199 17.7573 12.3752 17.8335 11.9916L19.1668 4.99992H5.00016" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g> <defs> <clipPath id="clip0_67_234"> <rect width="20" height="20" fill="white"></rect> </clipPath> </defs> </svg> </a> </li> </ul> </div> </div> </div> </div> </div> <!-- Main Header End --> <!-- SearchBar --> <div class="dz-search-area dz-offcanvas offcanvas offcanvas-top bg-light" tabindex="-1" id="offcanvasTop"> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"> × </button> <div class="container"> <form class="header-item-search"> <div class="input-group search-input"> <select class="default-select"> <option>All Categories</option> <option>Skicn Product </option> <option>Vogue Elegance</option> <option>Chic Harmony</option> <option>Flawless Allure</option> <option>Luxe Glam</option> <option>Divine Chic</option> <option>Svelte Styles</option> <option>Ethereal Glow</option> <option>Posh Trends</option> <option>Serene Glamour</option> <option>Elite Couture</option> <option>Opulent Charm</option> </select> <input type="search" class="form-control" placeholder="Search Product"> <button class="btn" type="button"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.16679 15.8333C12.8487 15.8333 15.8335 12.8486 15.8335 9.16667C15.8335 5.48477 12.8487 2.5 9.16679 2.5C5.48489 2.5 2.50012 5.48477 2.50012 9.16667C2.50012 12.8486 5.48489 15.8333 9.16679 15.8333Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M17.5001 17.5L13.8751 13.875" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> </div> <ul class="recent-tag"> <li class="pe-0"><span>Quick Search :</span></li> <li><a href="shop-list.html"></a>Skin Product</li> <li><a href="shop-list.html">Body Products</a></li> <li><a href="shop-list.html">Daily Products</a></li> <li><a href="shop-list.html">Cream Products</a></li> </ul> </form> <div class="row"> <div class="col-xl-12"> <h5 class="header-title mb-3">You May Also Like</h5> <div class="swiper category-swiper2"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="shop-card style-8"> <div class="dz-media"> <img src="images/cosmetic/1.png" alt="image"> </div> <div class="dz-content"> <h6 class="title"><a href="shop-list.html">Jewel Tone Nail Polish</a></h6> <h6 class="price">$40.00</h6> </div> </div> </div> <div class="swiper-slide"> <div class="shop-card style-8"> <div class="dz-media"> <img src="images/cosmetic/2.png" alt="image"> </div> <div class="dz-content"> <h6 class="title"><a href="shop-list.html">Balancing Body Cream</a></h6> <h6 class="price">$30.00</h6> </div> </div> </div> <div class="swiper-slide"> <div class="shop-card style-8"> <div class="dz-media"> <img src="images/cosmetic/3.png" alt="image"> </div> <div class="dz-content"> <h6 class="title"><a href="shop-list.html">Smoothing Body Butter</a></h6> <h6 class="price">$35.00</h6> </div> </div> </div> <div class="swiper-slide"> <div class="shop-card style-8"> <div class="dz-media"> <img src="images/cosmetic/4.png" alt="image"> </div> <div class="dz-content"> <h6 class="title"><a href="shop-list.html">Repairing Body Gel</a></h6> <h6 class="price">$20.00</h6> </div> </div> </div> <div class="swiper-slide"> <div class="shop-card style-8"> <div class="dz-media"> <img src="images/cosmetic/5.png" alt="image"> </div> <div class="dz-content"> <h6 class="title"><a href="shop-list.html">Skin Product</a></h6> <h6 class="price">$70.00</h6> </div> </div> </div> <div class="swiper-slide"> <div class="shop-card style-8"> <div class="dz-media"> <img src="images/cosmetic/6.png" alt="image"> </div> <div class="dz-content"> <h6 class="title"><a href="shop-list.html">Skin Product</a></h6> <h6 class="price">$45.00</h6> </div> </div> </div> <div class="swiper-slide"> <div class="shop-card style-8"> <div class="dz-media"> <img src="images/cosmetic/7.png" alt="image"> </div> <div class="dz-content"> <h6 class="title"><a href="shop-list.html">Skin Product</a></h6> <h6 class="price">$40.00</h6> </div> </div> </div> <div class="swiper-slide"> <div class="shop-card style-8"> <div class="dz-media"> <img src="images/cosmetic/1.png" alt="image"> </div> <div class="dz-content"> <h6 class="title"><a href="shop-list.html">Calming Body Lotion</a></h6> <h6 class="price">$60.00</h6> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- SearchBar --> <!-- Sidebar cart --> <div class="offcanvas dz-offcanvas offcanvas offcanvas-end " tabindex="-1" id="offcanvasRight"> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"> × </button> <div class="offcanvas-body"> <div class="product-description"> <div class="dz-tabs"> <ul class="nav nav-tabs center" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="shopping-cart" data-bs-toggle="tab" data-bs-target="#shopping-cart-pane" type="button" role="tab" aria-controls="shopping-cart-pane" aria-selected="true">Shopping Cart <span class="badge badge-light">5</span> </button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="wishlist" data-bs-toggle="tab" data-bs-target="#wishlist-pane" type="button" role="tab" aria-controls="wishlist-pane" aria-selected="false">Wishlist <span class="badge badge-light">2</span> </button> </li> </ul> <div class="tab-content pt-4" id="dz-shopcart-sidebar"> <div class="tab-pane fade show active" id="shopping-cart-pane" role="tabpanel" aria-labelledby="shopping-cart" tabindex="0"> <div class="shop-sidebar-cart"> <ul class="sidebar-cart-list"> <li> <div class="cart-widget"> <div class="dz-media me-3"> <img src="images/shop/shop-cart/pic1.jpg" alt=""> </div> <div class="cart-content"> <h6 class="title"><a href="product-thumbnail.html">Wooden Water Bottles</a></h6> <div class="d-flex align-items-center"> <div class="btn-quantity light quantity-sm me-3"> <input type="text" value="1" name="demo_vertical2"> </div> <h6 class="dz-price text-primary mb-0">$50.00</h6> </div> </div> <a href="javascript:void(0);" class="dz-close"> <i class="ti-close"></i> </a> </div> </li> <li> <div class="cart-widget"> <div class="dz-media me-3"> <img src="images/shop/shop-cart/pic2.jpg" alt=""> </div> <div class="cart-content"> <h6 class="title"><a href="product-thumbnail.html">Bamboo Cups</a></h6> <div class="d-flex align-items-center"> <div class="btn-quantity light quantity-sm me-3"> <input type="text" value="1" name="demo_vertical2"> </div> <h6 class="dz-price text-primary mb-0">$40.00</h6> </div> </div> <a href="javascript:void(0);" class="dz-close"> <i class="ti-close"></i> </a> </div> </li> <li> <div class="cart-widget"> <div class="dz-media me-3"> <img src="images/shop/shop-cart/pic3.jpg" alt=""> </div> <div class="cart-content"> <h6 class="title"><a href="product-thumbnail.html">Wooden Toothbrushes</a></h6> <div class="d-flex align-items-center"> <div class="btn-quantity light quantity-sm me-3"> <input type="text" value="1" name="demo_vertical2"> </div> <h6 class="dz-price text-primary mb-0">$65.00</h6> </div> </div> <a href="javascript:void(0);" class="dz-close"> <i class="ti-close"></i> </a> </div> </li> </ul> <div class="cart-total"> <h5 class="mb-0">Subtotal:</h5> <h5 class="mb-0">300.00$</h5> </div> <div class="mt-auto"> <div class="shipping-time"> <div class="dz-icon"> <i class="flaticon flaticon-ship"></i> </div> <div class="shipping-content"> <h6 class="title pe-4">Congratulations , you've got free shipping!</h6> <div class="progress"> <div class="progress-bar progress-animated border-0" style="width: 75%;" role="progressbar"> <span class="sr-only">75% Complete</span> </div> </div> </div> </div> <a href="shop-checkout.html" class="btn btn-light btn-block m-b20">Checkout</a> <a href="shop-cart.html" class="btn btn-secondary btn-block">View Cart</a> </div> </div> </div> <div class="tab-pane fade" id="wishlist-pane" role="tabpanel" aria-labelledby="wishlist" tabindex="0"> <div class="shop-sidebar-cart"> <ul class="sidebar-cart-list"> <li> <div class="cart-widget"> <div class="dz-media me-3"> <img src="images/shop/shop-cart/pic1.jpg" alt=""> </div> <div class="cart-content"> <h6 class="title"><a href="product-thumbnail.html">Wooden Water Bottles</a></h6> <div class="d-flex align-items-center"> <h6 class="dz-price text-primary mb-0">$50.00</h6> </div> </div> <a href="javascript:void(0);" class="dz-close"> <i class="ti-close"></i> </a> </div> </li> <li> <div class="cart-widget"> <div class="dz-media me-3"> <img src="images/shop/shop-cart/pic2.jpg" alt=""> </div> <div class="cart-content"> <h6 class="title"><a href="product-thumbnail.html">Wooden Cup</a></h6> <div class="d-flex align-items-center"> <h6 class="dz-price text-primary mb-0">$40.00</h6> </div> </div> <a href="javascript:void(0);" class="dz-close"> <i class="ti-close"></i> </a> </div> </li> <li> <div class="cart-widget"> <div class="dz-media me-3"> <img src="images/shop/shop-cart/pic3.jpg" alt=""> </div> <div class="cart-content"> <h6 class="title"><a href="product-thumbnail.html">Bamboo toothbrushes</a></h6> <div class="d-flex align-items-center"> <h6 class="dz-price text-primary mb-0">$65.00</h6> </div> </div> <a href="javascript:void(0);" class="dz-close"> <i class="ti-close"></i> </a> </div> </li> </ul> <div class="mt-auto"> <a href="shop-wishlist.html" class="btn btn-secondary btn-block">Check Your Favourite</a> </div> </div> </div> </div> </div> </div> </div> </div> <!-- Sidebar cart --> </header>