How to change navbar display for mobile phones via Twitter Bootstrap?

Question

Bootstrap

I have a menu made with Bootstrap, similar to the menu in this example
www.w3schools.com/bootstrap/tryit.asp?filename=try...
When the screen is reduced, all items disappear and only the button with three bars remains.
What needs to be changed so that when decreasing, not all items disappear, but the "sign up" and "login" buttons also remain?
It only occurred to me that you can create multiple menus, and display one of them for a specific screen size ... but it also seems to me that this is not a very correct solution.

Answer 1

I can offer something like this as an idea

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header pull-left">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="navbar-header  pull-right">
      <ul class="nav navbar-nav nav-pills pull-left">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
      <button data-target="#myNavbar" data-toggle="collapse" class="navbar-toggle" type="button">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>
  </div>
</nav>