<!--Header Start-->
<header class="z-index-fixed header-transparent header-absolute-top">
 <nav class="navbar navbar-expand-lg navbar-dark">
  <div class="container position-relative">
   <a class="navbar-brand" href="index.html">
     <img src="assets/img/logo/logo-white.svg" alt="" class="img-fluid">
   </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">
       <a href="#" data-bs-target="#modal-search-bar-2" data-bs-toggle="modal" class="nav-link lh-1">
        <i class="bx bx-search fs-6 lh-1"> </i>
       </a> <!--Search-bar-2-collapse-->
      </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>

<!--Search bar modal-->
<div id="modal-search-bar-2" class="modal fade" tabindex="-1" aria-labelledby="modal-search-bar-2"
  aria-hidden="true">
 <div class="modal-dialog modal-dialog-top modal-md">
 <div class="modal-content position-relative border-0">
  <div class="position-relative px-4">
    <div class="position-absolute end-0 width-7x top-0 d-flex me-4 align-items-center h-100 justify-content-center">
    <button type="button" class="btn-close w-auto small" data-bs-dismiss="modal" aria-label="Close">Cancel
    </div>
    <form class="mb-0">
      <div class="d-flex align-items-center">
        <div class="d-flex flex-grow-1 align-items-center">
          <i class="bx bx-search opacity-25"></i>
          <input type="text" placeholder="Search...."
          class="form-control shadow-none border-0 flex-grow-1 form-control-lg">
        </div>
      </div>
    </form>
    </div>
   <div class="p-4 border-top">
    <h6 class="mb-4">
      <i class="bx bx-lightning me-2 text-muted"></i>Top searches 
     </h6>
    <div class="d-flex flex-wrap align-items-center">
     <span><a href="#!" class="badge badge-pill border border-secondary text-body me-1 mb-1 px-3 py-1">Jeans</a></span>
     <span><a href="#!" class="badge badge-pill border border-secondary text-body me-1 mb-1 px-3 py-1">Shoes</a></span>
    </div>
   </div>
  </div>
 </div>
</div>