Best way to use Bootstrap 3 Navbar without responsive collapse

Question

I'm trying to create a simple Navbar in Bootstrap 3 that doesn't collapse - responsive isn't necessary here because we just have a simple title on the left + button on the right.

My goal is to have the title + buttons always appear the same for all resolutions. Something like this:

<div class="navbar navbar-fixed-top">      <form class="navbar-form navbar-right">         <button class="btn btn-default">Button 1</button>         <button class="btn btn-default">Button 2</button>     </form>      <a class="navbar-brand" href="#">Title Here</a>  </div> 

I've tried numerous combinations from the documentation. And this post outlines how to use the new .nav-header classes. I've tried duplicating the elements inside .nav-header - and also tried overriding the BS3 media query styles.

Is there an easier way to use the Navbar without collapsing?

Answer 1

The best way I could find is to use 2 navbar-header containers, and then use pull-left and pull-right since they aren't tied to any responsive media queries..

<div class="navbar navbar-fixed-top">     <div class="navbar-header pull-left">       <a class="navbar-brand" href="#">Title Here</a>     </div>     <div class="navbar-header pull-right">       <button type="button" class="btn btn-default navbar-btn">Button 1</button>       <button type="button" class="btn btn-default navbar-btn">Button 2</button>     </div> </div> 

Demo on Bootply: http://bootply.com/74912