<div class="top_area" id="top">
  <div class="top-strip container">
    <div class="row align-items-center">
      <div class="col-sm-3 col-3">
        <div class="top-action">
          <div class="searchbar">
            <a href="#" class="search_icon"><img src="images/search.svg" class="img-svg" alt="search" /></a>
            <input class="search_input" type="text" name="" placeholder="Search for Product, Category & more...">
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-6 text-center logo-area">
        <a class="navbar-brand m-0" href="index.php"> <img src="images/logo.png" alt="titanboards" /> </a>
      </div>
      <div class="col-sm-3 col-3 top-cnt text-right">
        <div class="d-flex justify-content-end top-action">
              <div class="shop-cart mr-4">
                <a href="cart.php">
                  <img src="images/shopping-cart.svg" class="img-svg" alt="shopping cart" />
                  <span class="badge badge-pill badge-info">01</span>
                </a>
              </div>
              <div class="my-account">
                <div class="dropdown">
                  <!-- <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                    My Account
                  </button> -->
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <img src="images/user.svg" class="img-svg" alt="user" />
                    <!-- <span>My Account</span> -->
                  </a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="login.php">Login</a>
                    <a class="dropdown-item" href="#" data-toggle="modal" data-target="#registerModal">Register</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Logout</a>
                  </div>
                </div>
              </div>
          </div>
        </div>
    </div>
  </div>
  <header class="navbar navbar-expand-md animate">
    <div class="container">      
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbars01" aria-controls="navbars01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
      <div class="collapse navbar-collapse" id="navbars01">
        <ul class="navbar-nav d-md-flex m-auto">
          <li class="nav-item"> <a class="nav-link active" href="#"> Home </a> </li>
          <li class="nav-item"> <a class="nav-link" href="#"> Products </a> </li>
          <!-- <li class="nav-item"> <a class="nav-link" href="#"> Projects </a> </li> -->
          <li class="nav-item"> <a class="nav-link" href="#"> Blogs </a> </li>
          <li class="nav-item"> <a class="nav-link" href="#">About</a> </li>  
          <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li>
        </ul> 
      </div> 
    </div>
  </header>
</div>