I have problem with 'collapse' in the bootstrap's navbar-CodePudding

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)

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)

And this is my code.

<div >
    <header  :>
      <nav >
        <div >
          <button
            
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNavAltMarkup"
            aria-controls="navbarNavAltMarkup"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span ></span>
          </button>
          <a  href="/"> LOGO </a>
          <!-- menu items -->
          <div
            
            id="navbarNavAltMarkup"
          >
            <div >
              <a  href="screen1">menu1</a>
              <a  href="screen1">menu2</a>
              <a  href="screen1">menu3</a>
              <a  href="screen1">menu4</a>
            </div>
          </div>
          <a  href="login">login</a>
        </div>
      </nav>
    </header>
  </div>

May I know the cause and solution of this problem? Thank you in advance!

CodePudding user response：

From my understanding, you may duplicate the login button and put it in front of the menu items div like so:

    <div >
      <button  type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup">
        <span ></span>
      </button>
      <a  href="/"> LOGO </a>
      <a  href="login">login</a>
      <!-- menu items -->
      <div  id="navbarNavAltMarkup"> 
        <div >
          <a  href="screen1">menu1</a>
          <a  href="screen1">menu2</a>
          <a  href="screen1">menu3</a>
          <a  href="screen1">menu4</a>
        </div>
      </div>
      <a  href="login">login</a>
    </div>

Then, you can play around with the bootstrap hiding element class to control when to show/hide the login buttons.

I hope this idea will be helpful for you, if not, perhaps you may provide a sample snippet so that we can understand more about your problem.