CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3responsive-design
David Silva Smith
David Silva Smith

Reputation: 11706

In Bootstrap 3 how do I fix my navbar?

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: mobile issue

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

enter image description here

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.

Upvotes: 1

Views: 239

Answers (1)

Jonathan Argentiero
Jonathan Argentiero

Reputation: 5727

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.

Upvotes: 3

Related Questions