nav.html

<nav class="navbar navbar-expand-lg fixed-top" style="font-size: 1.3em;padding:0;box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.5); display: flex; flex-direction: column;">
  <div class="navbarTop" style="width: 100%; height:30px; background-color: white;">
    <ul style="padding: 0; margin:0; height:100%; width: max-content; float: right; display: flex; align-items: center;">
      <li style="display: flex; align-items: center; float: right; margin-right: 15px;"><a href="" style="font-size: .7em; color: black; text-decoration: none; font-weight: 500;">About Us</a></li>
      <li style="display: flex; align-items: center; float: right; margin-right: 15px;"><a href="faq.html" style="font-size: .7em; color: black; text-decoration: none; font-weight: 500;">MarketPlace Care</a></li>
    </ul>
  </div>
  <div class="container-fluid" style=" background-color: tranparant; backdrop-filter: blur(5px);">
    <a class="navbar-brand" style="font-size:45px" href= "index.html">Marketplace</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link " aria-current="page" href="index.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="index.html#featureContainer">Shop</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Kategori
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <form class="d-flex" role="search">
          <input class="form-control" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-dark" type="submit">Search</button>
        </form>
      </ul>
      
      <span class="navbar-text">
          <button style="border: none; background-color: inherit; ">
            <a href="cart.html">
              <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" class="bi bi-cart4" viewBox="0 0 16 16">
                <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l.5 2H5V5H3.14zM6 5v2h2V5H6zm3 0v2h2V5H9zm3 0v2h1.36l.5-2H12zm1.11 3H12v2h.61l.5-2zM11 8H9v2h2V8zM8 8H6v2h2V8zM5 8H3.89l.5 2H5V8zm0 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
              </svg>
            </a>
          </button>        
          <button class="btn btn-outline-dark"><a  style="color:inherit; text-decoration:none; font-weight:500;" href="signup.html">Login/Register</a></button>
      </span>

    </div>
  </div>
</nav>