title: Changing the size of Bootstrap's standard navbar to a smaller size
body: <p>I am trying to change the size of Twitter Bootstrap's standard navbar to a smaller size. Inside the navbar, I want the Brand/logo on the left, a few menu options in the center, and some social media icons on the right.</p>
  
  <p>I've got them lined up fine so far, and I've been able to make it smaller... however, when the screen is reduced to a smaller size (say, mobile phone, etc) the social icons are positioned to the right of the menu options, and it just doesn't look good. </p>
  
  <p>What am I missing in the CSS/HTML that is making the social icons not position below the menu options?</p>
  
  <p>Here is a link to what I have accomplished so far to view the source: <a href="http://trevormcgrath.com/navbartest/smallnavbar.html" rel="nofollow">http://trevormcgrath.com/navbartest/smallnavbar.html</a></p>
  
  <p>I'd really appreciate any help anyone can give me here! Thank you in advance.</p>