How to exclude logo from collapsed navbar? [Bootstrap/HTML]

I'm trying to make it so when a user is on their desktop, the logo of the website will be visible in the middle of the navigation bar. However, I also want to make it so when the user is on mobile, the logo changes position to be on the top right of the screen, and the button to activate the navbar to be on the left. Currently, I have it in the center and it just stays there which results in it also being in the collapsed navbar. How can I make it so it's excluded from there?

        <nav class="navbar navbar-expand-lg navbar-dark">              <div class="container-fluid">                  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">                      <span class="navbar-toggler-icon"></span>                  </button>                  <div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">                      <div class="navbar-nav justify-content-center">                          <a class="nav-link" href="index.html">Home</a>                          <a class="nav-link" href="#">About</a>                          <img src="logo.png" alt="" width="100" height="45">                          <a class="nav-link" href="#">Portfolio</a>                          <a class="nav-link" href="#">Contact</a>                      </div>                  </div>              </div>          </nav>  

Thank you.

https://stackoverflow.com/questions/67352632/how-to-exclude-logo-from-collapsed-navbar-bootstrap-html May 02, 2021 at 11:05AM