title: Bootstrap 3 Navbar Dynamic Collapse
body: <p>I am searching for a solution to a resizing issue with bootstrap's navbar.</p>
  
  <p>Currently a navbar can have a sort of 'overlapping' effect before becoming compacted. (I am aware that this is due to media queries)</p>
  
  <p><img src="https://i.stack.imgur.com/GUDDL.png" alt="example from bootstraps site"></p>
  
  <p>Media queries are being used here to dictate when to go compact, however I am looking for a solution that will cause the navbar to resize ONLY when there is no room left between '.navbar-nav' and '.navbar-right'.</p>
  
  <p>This is significant because '.navbar-nav' and '.navbar-right' have dynamic widths. (in other words sometimes '.navbar-nav' will contain anywhere from 1 list item to 5 list items. '.navbar-right' is similar in that it is a string of text that could be anywhere from 3 characters to potentially 100 characters long or even longer.</p>
  
  <p><img src="https://i.stack.imgur.com/7L4UT.png" alt="enter image description here"></p>
  
  <p>Below is a plunker example where by resizing the preview pane, you can see the unintended 'overlapping' taking place (as it waits for the max-width media query to be met).</p>
  
  <p><a href="http://plnkr.co/edit/7r5fNX2JyJUuT0PvVPDf?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/7r5fNX2JyJUuT0PvVPDf?p=preview</a></p>
  
  <p>How can I have it become compacted only when '.navbar-nav' and '.navbar-right' have no room between each other (say.. 5px of space between each other or something similar)?</p>
  
  <p><em>(please note, adjusting the break points is not enough to accomplish this)</em></p>