我如何将我的导航栏品牌对齐到中心并让我的导航链接从两侧包围它

Question

I want my navbar brand to be in the middle and my nav links to be positioned on the left and right of my nav brand. Because when the screen reaches md I want the nav links to disappear and be in the burger but still have my nav brand showing at the top center.

    <nav class="navbar navbar-expand-md bg-dark navbar-dark py-3">
        <div class="container">
            <div class="navbar-brand"><h2>Name</h2></div>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#burger"><span class="navbar-toggler-icon"></span></button>

            <div class="collapse navbar-collapse" id="burger">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item px-5">
                        <a href="#python" class="nav-link" style="color: white;"><h2>Python</h2></a>
                    </li>
                    <li class="nav-item px-5">
                        <a href="#html&css" class="nav-link" style="color: white;"><h2>Html&Css</h2></a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

I am going for this look What I want

Answer 1

HTML

<h1 class="text-center">Center Navbar Brand logo</h1>


<div class="container">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
              <a class="navbar-brand" href="http://disputebills.com"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTvuVbC_1kQQsg8U63u6gWMWuA7W1Ck5t-zkw&usqp=CAU" alt="logo">
      </a>
      </div>
      

      
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-left">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </nav>
</div>

CSS

.navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}


/* DEMO example styles for logo image */
.navbar-brand {
  padding: 0px;
}
.navbar-brand>img {
  height: 100%;
  width: auto;
  padding: 7px 14px;
}

Screenshot