html - Prevent columns from stacking when view port changes? (BS) -

i have modified navbar in bootstrap use x-scroll instead of hamburger/dropdown style. problem having .navbar-nav , .navbar-header stacking on mobile , need them remain inline.

i have tried lots of methods they're extremely messy , inconsistent.

<nav class="navbar navbar-default">     <div class="container-fluid">          <div class="navbar-header">             <a class="navbar-brand" href="#"></a>         </div>          <ul class="nav navbar-nav">             <li><a href="#">link</a></li>             ...         </ul>      </div> </nav> 

css:

.navbar-nav {   float: none;   white-space: nowrap;   overflow-x: auto;   -webkit-overflow-scrolling: touch; } .nav li {   display: inline-block;   float: none; } 

demo: http://jsfiddle.net/1u7zyehs/2/

i know default behaviour of bs stack containers on mobile, there clean way prevent happening?

in media query targeting mobile devices, can add following... fiddle

.navbar-header{   float:left; }