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.

Check thisSO answer http://stackoverflow.com/a/30702646/1151408 — Yuri, Apr 07 '16 at 14:36

score 3 · Accepted Answer · answered Apr 07 '16 at 14:12

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.

In Bootstrap 3 how do I fix my navbar?

1 Answers1