navbar.html

<section id="header1">
  <div class="left-section1">
    <a href="/"><img src="../../images/images.png" class="logo1" alt="" /></a>
    <ul id="navbar1">
      <li>
        <a class="#" href="/Pages/Category/index.html?category=mountain"
          >MOUNTAIN</a
        >
      </li>
      <li><a href="/Pages/Category/index.html?category=road">ROAD</a></li>
      <li><a href="/Pages/Category/index.html?category=active">ACTIVE</a></li>
      <li>
        <a href="/Pages/Category/index.html?category=electric">ELECTRIC</a>
      </li>
      <li><a href="/Pages/Category/index.html?category=kids">KIDS</a></li>
    </ul>
  </div>

  <div class="form1">
    <div class="search-bar1">
      <input type="text" placeholder="Search" />
      <i class="fas fa-search search-icon"></i>
    </div>
  </div>

  <div class="right-section1">
    <div class="icons1">
      <a href="cart.html">
        <i
          class="fa-solid fa-cart-shopping"
          style="color: #f0f0f0; margin-right: 50px"
        ></i>
      </a>
      <span
        id="user-details"
        style="display: none; margin-right: 38px; color: #ffffff"
      >
        <!-- Username will be inserted here -->
      </span>
      <i
        id="user-icon"
        class="fa-regular fa-user"
        style="color: #ffffff; margin-right: 38px"
      ></i>
      <i class="fa-regular fa-heart" style="color: #eeeeee"></i>
    </div>
  </div>
</section>
<section id="top1">
  <p></p>
  <div>
    <ul id="topbar1" class="top-navbar1">
      <a href=""
        ><i class="fa-solid fa-location-crosshairs" style="color: #eca746"></i
        ><span>
          Your Location <span><b>Delhi</b></span></span
        ></a
      >
      <a href="#"><span>About us</span></a>
      <a href="#"><span>Delivery</span></a>
      <a href="#"><span>Payment</span></a>
      <a href="#"><span>Contact us</span></a>
    </ul>
  </div>
</section>