title: Bootstrap navbar x-scroll
body: <p>I am trying to change the behaviour of the Bootstrap navbar to inherit a horizontal scroll instead of collapsing, it works on mobile but I want it to be the same across all devices... using SASS:</p>
  
  <pre><code>.navbar-nav {
    li {
      display: inline-block; // stops menu items from stacking
    }
  }
  .scroll {
    white-space: nowrap;
    overflow-x: scroll; // scroll
    -webkit-overflow-scrolling: touch;
  }
  </code></pre>
  
  <p>Here is an image of it in mobile view, it works great:
  <a href="https://i.stack.imgur.com/zMHys.png" rel="noreferrer"><img src="https://i.stack.imgur.com/zMHys.png" alt="enter image description here"></a></p>
  
  <p>As I increase the size of the view port and media queries kick in it completely disabled the horizontal scroll:</p>
  
  <p><a href="https://i.stack.imgur.com/WIlIM.png" rel="noreferrer"><img src="https://i.stack.imgur.com/WIlIM.png" alt="enter image description here"></a></p>
  
  <p>And finally on desktop:</p>
  
  <p><a href="https://i.stack.imgur.com/P9Yjp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/P9Yjp.png" alt="enter image description here"></a></p>
  
  <p>HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="navbar-header"&gt;
    &lt;a class="navbar-brand" href="#"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;ul class="nav navbar-nav scroll"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Hyperlink&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Hyperlink&lt;/a&gt;&lt;/li&gt;
    &lt;li class="dropdown"&gt;
      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Dropdown &lt;span class="caret hidden-xs"&gt;&lt;/span&gt;&lt;/a&gt;
      ...
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Hyperlink&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Hyperlink&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Hyperlink&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Hyperlink&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Hyperlink&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Hyperlink&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there a way I can keep the x-scroll throughout the entire site? I can't pin point the CSS that is changing it's behaviour. As an added bonus I also need .navbar and .navbar-header to remain inline because that is stacking as well.</p>