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

Solution 1:

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

    <div class="container-fluid container-md mx-0 mx-md-auto bg-white">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="logo-font fs-4" href="/"> LOGO </a>
      <a class="nav-login d-sm-none" href="login">login</a>
      <!-- menu items -->
      <div class="collapse show navbar-collapse justify-content-center" id="navbarNavAltMarkup"> 
        <div class="navbar-nav text-start">
          <a class="nav-item" href="screen1">menu1</a>
          <a class="nav-item" href="screen1">menu2</a>
          <a class="nav-item" href="screen1">menu3</a>
          <a class="nav-item" href="screen1">menu4</a>
        </div>
      </div>
      <a class="nav-login d-xs-none" 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.