navbar

<nav class="navbar sticky-top top-st navbar-expand-lg navbar-dark bg-transparant mg-auto" id="top">
    <div class="container-fluid">
      <a class="navbar-brand px-4" href="index.html">Valuator</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarScroll">
        <ul class="navbar-nav ms-auto me-right mx-5 px-3 my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
          <li class="navbar-item px-2 py-2">
            <a class="nav-link active" aria-current="page" href="#Home">Home</a>
          </li>
          <li class="navbar-item px-2 py-1">
            <button type="button" class="btn btn-primary " id="button1">
              <a class="nav-link active py-1" aria-current="page" href="#valuator">Valuator</a>
            </button>
          </li>
          <li class="navbar-item px-2 py-2">
            <a class="nav-link active" aria-current="page" href="">factors Explained</a>
          </li>
          <li class="navbar-item px-2 py-1">
            <button type="button" class="btn btn-primary" id="button3">
              <a class="nav-link active py-1" aria-current="page" href="">About us</a>
            </button>
          </li>
        </ul>
      </div>
    </div>
  </nav>