Use a lot ul/li on bootstrap Nav or use links and style in css?

Question

I’m recreating a menu with bootstrap 4.5 for better learning and I was left with a question.

I have the following nav for example.

The proposal is to recreate this menu in a responsive way with bootstrap components without having to touch the CSS too much.

I have a menu icon, a logo and the right side of the logo, two lines, one above the other. On the right side, I have more menu items, but in one row only.

I believe I’m using too much ul/li of bootstrap and even though it works, it doesn’t seem the best way to do it.

Follow the code of index.html:

 <header>
      <nav class="navbar navbar-expand shadow-sm menu">
        <a class="navbar-brand" href="#"><img src="./img/icon-menu.svg" alt=""></a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarsExample02"
          aria-controls="navbarsExample02"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarsExample02">
         
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#"
                ><img src="./img/logo-guia.png" width="30" alt=""></a
              >
            </li>

            <ul class="list-group lista-menu">
              <li class="list-group-item">

                <ul class="nav">
                  <li class="nav-item">
                    <a class="nav-link active" href="#">Active</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                  </li>
                </ul>
                
              </li>

              <li class="list-group-item">

                <ul class="nav">
                  <li class="nav-item">
                    <a class="nav-link active" href="#">Active</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                  </li>
                </ul>
              </li>              
            </ul>    

          </ul>     

          <form class="form-inline my-2 my-md-0">
            <input class="form-control" type="text" placeholder="Search" />
          </form>

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

Follow the Css code:

body {
  margin: 0;
  padding: 0;
}

.menu > a {
  font-size: 0;
}

.menu ul.lista-menu li {
  border: 0;
  padding: 0;
}

Currently it is like this: