<!--::Begin Header-->
<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="#offcanvasSearchTop" data-bs-toggle="offcanvas" class="nav-link lh-1">
        <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::Search bar Offcanvas from top-->
<div class="offcanvas offcanvas-top" data-bs-scroll="true" tabindex="-1" id="offcanvasSearchTop"
aria-labelledby="offcanvasSearchTopLabel" style="height:95px">
<div class="offcanvas-body">
    <div class="position-relative">
        <!--Close search offcanvas-->
        <div class="position-absolute end-0 top-0 d-flex align-items-center h-100 justify-content-center">
            <button type="button"
                class="btn-outline-secondary rounded-circle btn p-0 width-4x height-4x flex-center small"
                data-bs-dismiss="offcanvas" aria-label="Close">
                <i class="bx bx-x fs-4"></i>
            </button>
        </div>

        <div class="container">
            <!--Search form-->
            <form class="mb-0">
                <div class="d-flex align-items-center">
                    <div class="d-flex flex-grow-1 align-items-center">
                        <!--Icon-->
                        <i class="bx bx-search opacity-25"></i>
                        <!--Input-->
                        <input type="text" placeholder="Search...." autofocus
                            class="form-control shadow-none border-0 flex-grow-1 form-control-lg">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</div>
<!--::/End Search bar Offcanvas from top-->