title: I have problem with 'collapse' in the bootstrap's navbar
body: <p>I'm making a responsive NavBar using bootstrap5 and vue.js.
  I made a simple responsive NavBar with an example of bootstrap, but there are some problems when I make some modifications and use 'collapse button'.
  The image below is my NavBar. (Desktop UI and mobile UI)</p>
  <p><a href="https://i.stack.imgur.com/hTWzp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hTWzp.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/vvXAc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vvXAc.png" alt="enter image description here" /></a></p>
  <p>And this is the image when I open the menu bar through collapse.
  When I open the menu, the logo and login button on the right are pushed aside. (The login button goes down the menu bar)</p>
  <p><a href="https://i.stack.imgur.com/Zj7B8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zj7B8.png" alt="enter image description here" /></a></p>
  <p>And this is my code.</p>
  <pre><code>&lt;div class=&quot;container-fluid container-lg px-0 px-xl-5&quot;&gt;
      &lt;header class=&quot;mb-3&quot; :class=&quot;{ 'navbar--hidden': !showNavbar }&quot;&gt;
        &lt;nav class=&quot;navbar navbar-expand-md fixed-top navbar-light&quot;&gt;
          &lt;div class=&quot;container-fluid container-md mx-0 mx-md-auto bg-white&quot;&gt;
            &lt;button
              class=&quot;navbar-toggler&quot;
              type=&quot;button&quot;
              data-bs-toggle=&quot;collapse&quot;
              data-bs-target=&quot;#navbarNavAltMarkup&quot;
              aria-controls=&quot;navbarNavAltMarkup&quot;
              aria-expanded=&quot;false&quot;
              aria-label=&quot;Toggle navigation&quot;
            &gt;
              &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;a class=&quot;logo-font fs-4&quot; href=&quot;/&quot;&gt; LOGO &lt;/a&gt;
            &lt;!-- menu items --&gt;
            &lt;div
              class=&quot;collapse navbar-collapse justify-content-center&quot;
              id=&quot;navbarNavAltMarkup&quot;
            &gt;
              &lt;div class=&quot;navbar-nav text-start&quot;&gt;
                &lt;a class=&quot;nav-item&quot; href=&quot;screen1&quot;&gt;menu1&lt;/a&gt;
                &lt;a class=&quot;nav-item&quot; href=&quot;screen1&quot;&gt;menu2&lt;/a&gt;
                &lt;a class=&quot;nav-item&quot; href=&quot;screen1&quot;&gt;menu3&lt;/a&gt;
                &lt;a class=&quot;nav-item&quot; href=&quot;screen1&quot;&gt;menu4&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;a class=&quot;nav-login&quot; href=&quot;login&quot;&gt;login&lt;/a&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
      &lt;/header&gt;
    &lt;/div&gt;
  </code></pre>
  <p>May I know the cause and solution of this problem?
  Thank you in advance!</p>