In Bootstrap 3 how do I fix my navbar?

Question

In Bootstrap 3 how do I get the navbar-right to work correctly on mobile? In my project for some reason when the browser shrinks down it puts my navbar-right item on the next line.

I've tried setting pull right on it, and setting pull-left on the brand image, but no luck.

I'm assuming there is something I'm doing wrong in Bootstrap or a class I need to add. Please help.

Here is what it looks like on mobile:

Here is what I want it to look like on mobile:

On desktop it works fine.

Here is my navbar html:

<header>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
       <a href="/">
         <img src="/assets/dot-logo-91x50.png">
       </a>
      </div>
      <div class="navbar">
        <ul class="nav navbar-nav navbar-right">
          <a class="navbar-brand" href="/apply/">Continue Application</a>
        </ul>
      </div>
    </div>
  </nav>
</header>

Please help.

Answer 1

Following Bootstrap 3 styling, your navbar element should show the mobile toggle button when in responsive resolution, like in this example .

If you want to have only those two elements of your interface in the same position inside a navbar element you could edit your html as follows:

<header>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="/">
          <img src="/assets/dot-logo-91x50.png">
        </a>
        <a class="navbar-brand pull-right" href="/apply/">Continue Application</a>
      </div>
    </div>
  </nav>
</header>

But I suggest you to implement a mobile toggle button with a collapsed menu to improve your users experience.