Central logo that overlaps navbar bootstrap

Question

Hi I am trying to get my navbar to look like this:

But I cant seem to figure out how to get the image to be on top of the navbar. I am using bootsrap 5. I havent added any css to the navbar yet is there some property i can use to bring it to the front. Thanks, here is the html:

<header>
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <div class="container-fluid">

      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav me-auto mb-2 mb-md-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">HOME</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">ABOUT</a>
          </li>
          <a class="navbar-brand" href="#"><img src="/images/logos/circle-cropped.png" alt=""></a>
          <!-- <a href="#"><img src="/images/logos/circle-cropped.png"></a> -->
        </ul>
      </div>
    </div>
  </nav>
</header>

Answer 1

WORKING DEMO HERE

This CSS should help:

.navbar-brand {
  flex: 0 1 auto;
  display: block;
  width: 100px;
  height: 100px; 
  position: absolute;
  left: 50%;
  top: 0;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%);
  text-align: center;
}

.navbar-brand img {
  max-height: 100%;
  max-width: 100%;
}