#top-menu .current a

{

    color: orange !important;

}

​

//when a route is active we can use this to add a certain style to the element:

<router-link to="/[route-name]" active-link="active'> <router-link>

​

//when the route is active, active-link will add the class active to the element

//you can define then a certain style for elements that contain the class active

a:active {

  background-color: #34D399;

}

<nav id="main-menu" className="navbar navbar-expand-lg navbar-dark bg-dark">

    <div className="container-fluid mx-5">

      <a className="navbar-brand" href="#"><img src={logo} className="rounded img-thumbnail logo" alt="logo"/></a>

      {/* <a className="navbar-brand" href="#"><img src={logo} className="rounded img-thumbnail App-logo" alt="logo"/></a> */}

      {/* <a href="https://www.vecteezy.com/free-vector/ornament">Ornament Vectors by Vecteezy</a> */}

      <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

        <span className="navbar-toggler-icon"></span>

      </button>

      <div className="collapse navbar-collapse mt-auto" id="navbarSupportedContent">

        <ul className="navbar-nav ms-auto mb-2 mb-lg-0">

          <li className="nav-item">

            <a className="nav-link active" aria-current="page" href="#">Home</a>

          </li>

          <li className="nav-item">

            <a className="nav-link" href="#">Products</a>

          </li>

          <li className="nav-item">

            <a className="nav-link" href="#">About us</a>

          </li>

          <li className="nav-item">

            <a className="nav-link" href="#">Contact me</a>

          </li>

        </ul>

      </div>

    </div>

  </nav>