<!--Header Start-->
     <header class="z-index-fixed">

     <!--Info bar container-->
      <div class="container pt-2">
       <div class="row align-items-center">
        <div class="col-5">

        <!--Social icons-->
         <ul class="list-inline mb-0">
          <li class="list-inline-item me-0">
           <a href="#!" class="d-inline-block si rounded-pill width-2x height-2x si-hover-facebook">
              <i class="bx bxl-facebook fs-6"></i>
              <i class="bx bxl-facebook fs-6"></i>
           </a>
        </li>
        <li class="list-inline-item me-0">
           <a href="#!" class="d-inline-block si rounded-pill width-2x height-2x si-hover-twitter">
               <i class="bx bxl-twitter fs-6"></i>
                <i class="bx bxl-twitter fs-6"></i>
           </a>
        </li>
          <li class="list-inline-item">
            <a href="#!" class="d-inline-block si rounded-pill width-2x height-2x si-hover-linkedin">
             <i class="bx bxl-linkedin fs-6"></i>
             <i class="bx bxl-linkedin fs-6"></i>
           </a>
         </li>
        </ul>
       </div>
     <div class="col-7 text-end">
       <div class="d-flex align-items-center justify-content-end">
          <span class="me-3 text-muted small">
            <i class="bx bx-phone d-none d-sm-inline-block me-2 align-middle"></i>+01 555 1234 789
          </span>
         <a href="#" class="text-muted small"><i class="bx bx-user-circle d-none d-sm-inline-block me-2 align-middle"></i>Login</a>
        </div>
       </div>
      </div>
     </div>
     <nav class="navbar navbar-expand-lg navbar-light bg-white">
      <div class="container position-relative">
        <!--Logo-->
        <a class="navbar-brand" href="index.html">
          <img src="assets/img/logo/logo.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="#" class="btn btn-success btn-sm rounded-pill">Purchase</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>