Header Search bar
Build stunning website faster than ever
<!--::Begin Header-->
<header class="z-fixed header-transparent header-absolute-top pt-lg-3">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container position-relative">
<!--:Brand Logo:-->
<a class="navbar-brand" href="index.html">
<img src="assets/img/logo/logo.svg" alt="" class="img-fluid navbar-brand-light">
<img src="assets/img/logo/logo-white.svg" alt="" class="img-fluid navbar-brand-dark">
</a>
<div class="d-flex align-items-center navbar-no-collapse-items order-lg-last">
<button class="navbar-toggler order-last" type="button" data-bs-toggle="collapse"
data-bs-target="#mainNavbarTheme" aria-controls="mainNavbarTheme" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<i></i>
</span>
</button>
<div class="nav-item me-3 me-lg-0 fullscreen-toggler">
<a href="#seachOffcanvas" class="nav-link lh-1" data-bs-toggle="offcanvas">
<i class="bx bx-search-alt-2 fs-5 lh-1"></i>
</a>
</div>
</div>
<div class="collapse navbar-collapse" id="mainNavbarTheme">
<!--Navbar items-->
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs- toggle="dropdown">Dropdown Nav</a>
<div class="dropdown-menu dropdown-menu-end">
<a href="#" class="dropdown-item">Dropdown item</a>
<a href="#" class="dropdown-item">Dropdown item</a>
<a href="#" class="dropdown-item">Dropdown item</a>
<a href="#" class="dropdown-item">Dropdown item</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!--::/end Header-->
<!--Begin::Fullscreen-Offcanvas - Search-->
<div class="offcanvas offcanvas-top offcanvas-fullscreen h-100" id="seachOffcanvas">
<div class="offcanvas-body">
<!--fullscreen close-->
<button
class="btn position-absolute end-0 top-0 me-5 mt-3 z-2 btn-secondary width-4x height-4x flex-center p-0 rounded-circle"
data-bs-dismiss="offcanvas">
<i class="bx bx-x fs-5"></i>
</button>
<div class="container py-5">
<ul class="fullscreen-list list-unstyled mb-0 w-100">
<!--Item(animated)-->
<li class="fullscreen-item">
<div class="container mb-5 mb-lg-7">
<form>
<div class="row">
<div class="col-12">
<div class="d-flex align-items-center">
<span><i class="bx bx-search-alt-2 fs-4 text-body-secondary"></i></span>
<input class="form-control form-control-lg border-0 shadow-none fs-2"
type="text" placeholder="Type and hit enter..." autofocus>
</div>
</div>
<div class="col-1 d-none">
<div class="d-grid">
<button class="btn btn-lg btn-white rounded-0"
type="button">Search</button>
</div>
</div>
</div>
</form>
</div>
</li>
<!--Item(animated)-->
<li class="fullscreen-item">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-5 me-lg-auto">
<h6 class="mb-4">Popular Categories</h6>
<!--Category badges-->
<div class="d-flex flex-wrap align-items-center g-2">
<span><a href="#!"
class="badge badge-pill bg-primary text-white hover-shadow hover-lift me-2 mb-2 px-3 py-2">Jeans</a></span>
<span><a href="#!"
class="badge badge-pill bg-primary text-white hover-shadow hover-lift me-2 mb-2 px-3 py-2">Shoes</a></span>
<span><a href="#!"
class="badge badge-pill bg-primary text-white hover-shadow hover-lift me-2 mb-2 px-3 py-2">Watches</a></span>
<span><a href="#!"
class="badge badge-pill bg-primary text-white hover-shadow hover-lift me-2 mb-2 px-3 py-2">Men's</a></span>
<span><a href="#!"
class="badge badge-pill bg-primary text-white hover-shadow hover-lift me-2 mb-2 px-3 py-2">Sneakers</a></span>
<span><a href="#!"
class="badge badge-pill bg-primary text-white hover-shadow hover-lift me-2 mb-2 px-3 py-2">Casual</a></span>
<span><a href="#!"
class="badge badge-pill bg-primary text-white hover-shadow hover-lift me-2 mb-2 px-3 py-2">Shirts</a></span>
<span><a href="#!"
class="badge badge-pill bg-primary text-white hover-shadow hover-lift me-2 mb-2 px-3 py-2">T-shirts</a></span>
<span><a href="#!"
class="badge badge-pill bg-primary text-white hover-shadow hover-lift me-2 mb-2 px-3 py-2">Lowers</a></span>
</div>
</div>
<div class="col-md-6">
<h6 class="mb-5">Featured products</h6>
<div class="row">
<div class="col-md-10">
<!--Item-->
<a href="#!"
class="card-hover d-flex d-block overflow-hidden position-relative">
<div class="me-4 overflow-hidden width-6x height-6x">
<img src="assets/img/shop/products/01.jpg" alt=""
class="img-zoom img-fluid">
</div>
<div class="">
<div class="fs-6 fw-medium">Denim Jacket</div>
<span class="opacity-75">$69.00</span>
</div>
</a>
<!--Divider-->
<hr class="my-3">
<!--Item-->
<a href="#!"
class="card-hover d-flex d-block overflow-hidden position-relative">
<div class="me-4 overflow-hidden width-6x height-6x">
<img src="assets/img/shop/products/02.jpg" alt=""
class="img-zoom img-fluid">
</div>
<div class="">
<div class="fs-6 fw-medium">White shirt for mens</div>
<span class="opacity-75">$24.00</span>
</div>
</a>
<!--Divider-->
<hr class="my-3">
<!--Item-->
<a href="#!"
class="card-hover d-flex d-block overflow-hidden position-relative">
<div class="me-4 overflow-hidden width-6x height-6x">
<img src="assets/img/shop/products/03.jpg" alt=""
class="img-zoom img-fluid">
</div>
<div class="">
<div class="fs-6 fw-medium">High Shoes for womens</div>
<span class="opacity-75">$39.00</span>
</div>
</a>
<!--Divider-->
<hr class="my-3">
<!--Item-->
<div class="text-end">
<a href="#!" class="link-hover-underline">Browse products
<svg xmlns='http://www.w3.org/2000/svg' fill='currentColor'
width="24" height="24" viewBox='0 0 24 24'>
<path d='M22 12l-4-4v3H3v2h15v3z'></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--/end::Fullscreen-Offcanvas - Search-->
<!-- Bootstrap + Vendor + Theme -->
<link href="assets/css/theme.min.css" rel="stylesheet">
<!-- Bootstrap + Vendor + Theme -->
<script src="assets/css/theme.bundle.js"></script>