title: Prevent elements with a nav class from collapsing
body: <p>I am building my page layout using bootstrap 3x. Even though it's most popular because it's <code>mobile first</code> the smallest device that is targeted by this application will be a laptop with standard <code>1366x768</code> (if I'm not mistaken) resolution and above.</p>
  
  <p>Is bootstrap the best solution in this case is out of question since I'm not the one picking the technologies.</p>
  
  <p>So what I do now is removing all unneeded classes from my markup and also I change the behavior to what I think is more native for a standard web site.</p>
  
  <p>I changed my navigation bar like so :</p>
  
  <pre><code>   &lt;div role="navigation"&gt;
        &lt;div class="container second-navigation-container"&gt;
            &lt;ul class="nav nav-pills nav-justified"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>But still when the display size gets small enough (resizing the window) I get this</p>
  
  <p><img src="https://i.stack.imgur.com/9LK63.png" alt="Collpasing menu"></p>
  
  <p>which I understand is desired behavior for devices with small displays, but what I want is just to shrink the elements to some point like it's happening right now and then start cutting off the side. Something like this :</p>
  
  <p><img src="https://i.stack.imgur.com/ZkYjD.png" alt="Overlayed menu"></p>
  
  <p>I've already made some customizations to the default bootstrap css but for this one I'm not sure what to look for and how to change it to get what I want.</p>