How do I prevent an expanding menu from rearranging/moving items in a navbar?

Question

I've got a responsive navbar with a hamburger menu icon on the left, a brand icon in the center and theme button on the right. When the viewport is large enough, the hamburger menu disappears, the navigation items are displayed in the middle and the brand icon is on the left. This all works nice and fine, but when I click the hamburger menu it pushes the brand icon all the way to the right of the navbar, and the theme toggle button is pushed down below the navigation items. Is there a way to keep the brand icon and the theme toggle buttons from moving?

I'm using Bootstrap 5's CSS and JS libraries in addition to my own.

You can find a MWE on this pen, as well as below.

<header class="navbar navbar-expand-lg ludo-navbar fixed-top">
  <nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap">

    <!-- {# toggle button #} -->
    <div>
      <button class="navbar-toggler p-2" 
              type="button" 
              data-nav-visible="false" 
              data-bs-toggle="collapse" 
              data-bs-target="#navbarMenu" 
              aria-controls="navbarMenu" 
              aria-expanded="false" 
              aria-label="Toggle navigation">
        Nav Toggle
      </button>
    </div>

    <!-- {# brand icon #} -->
    <div>
      <a class="navbar-brand">
        LOGO IMAGE
      </a>
    </div>

    <!-- {# theme button #} -->
    <div class="order-last">
      <button class="p-2" 
              type="button" 
              aria-controls="theme-toggle-svg"
              data-nav-visible="false" 
              aria-checked="false" 
              aria-label="Toggle theme">
        Theme Toggle
      </button>
    </div>

    <!-- {# navigation items #} -->
    <div class="collapse navbar-collapse justify-content-center" id="navbarMenu">
      <ul id="nav-primary" class="navbar-nav mb-2 mb-lg-0" aria-label="Navigation Menu" data-nav-visible="false">
        <li class="nav-item">
          <a class="nav-link fs-5" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fs-5" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fs-5" href="#">Foobar</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fs-5" href="#">Bazlow</a>
        </li>
      </ul>
    </div>
  </nav>
</header>

<main style="margin-top: 5rem">
  This is where a lot of text would go!
</main>

Answer 1

You just need to tweak the CSS a little:

main {
  margin-top: 5rem;
}
/* below is the new stuff */
@media (max-width:991px) {
  #navbarMenu {
    background: #fff;
    position: absolute;
    top: 55px;
    width: 100%;
  }
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<header class="navbar navbar-expand-lg ludo-navbar fixed-top">
  <nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap">

    <!-- {# toggle button #} -->
    <div>
      <button class="navbar-toggler p-2" 
              type="button" 
              data-nav-visible="false" 
              data-bs-toggle="collapse" 
              data-bs-target="#navbarMenu" 
              aria-controls="navbarMenu" 
              aria-expanded="false" 
              aria-label="Toggle navigation">
        Nav Toggle
      </button>
    </div>

    <!-- {# brand icon #} -->
    <div>
      <a class="navbar-brand">
        LOGO IMAGE
      </a>
    </div>

    <!-- {# theme button #} -->
    <div class="order-last">
      <button class="p-2" 
              type="button" 
              aria-controls="theme-toggle-svg"
              data-nav-visible="false" 
              aria-checked="false" 
              aria-label="Toggle theme">
        Theme Toggle
      </button>
    </div>

    <!-- {# navigation items #} -->
    <div class="collapse navbar-collapse justify-content-center" id="navbarMenu">
      <ul id="nav-primary" class="navbar-nav mb-2 mb-lg-0" aria-label="Navigation Menu" data-nav-visible="false">
        <li class="nav-item">
          <a class="nav-link fs-5" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fs-5" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fs-5" href="#">Foobar</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fs-5" href="#">Bazlow</a>
        </li>
      </ul>
    </div>
  </nav>
</header>

<main>
  This is where a lot of text would go!
</main>