title: Make bootstrap navbar mobile, at a different width than default
body: <p>I am having some bootstrap 3.1.1 problem. I have a navbar with a good amount if list items on it. It works perfectly but when the screen gets smaller, it reaches a point where all my &lt;ul&gt; breaks into the next line, like this:</p>
  
  <p><img src="https://i.stack.imgur.com/4441L.png" alt="Navbar Glitch"></p>
  
  <p>What I want to do to fix it, is that it shows the button that toggles the navbar when bootstrap detects a small screen width. I am so bad at media queries and despite the fact that this is probably 4 lines of css code, I can't figure it out. Basically, instead of having to reach the 745px mark, it will turn into mobile at 900px for example.</p>
  
  <p>If it helps, here is a codepen of the navbar: <a href="http://codepen.io/anon/pen/oncgh" rel="nofollow noreferrer">http://codepen.io/anon/pen/oncgh</a></p>
  
  <p>Thank you in advance so much for the help!</p>