title: Bootstrap 3 Nav header wraps between 768 and 992 pixels
body: <p>I have 5 items in my navigation header that are kind of "wordy". When the screen size is between 768px and 992px, the menu items wrap to the line below my brand. This causes some pages to have their content hidden since my body tags padding-top is not adjusted to the nav height.</p>
  
  <p>Once it goes below 768px, then it transitions to the default collapsed menu items that bootstrap does for everything.</p>
  
  <p>I'm kind of lost on how to do this. Should I modify the media breakpoints to accommodate for my "minimum menu size", so when when it goes below that, it just transitions to the collapsible version instead of wrapping the lines/text? Or should I be manipulating the container size, etc?</p>
  
  <p>Any thoughts/suggestions?</p>
  
  <p>Here's the site: <a href="http://wrestlestat.apphb.com" rel="nofollow">http://wrestlestat.apphb.com</a></p>
  
  <p>Note: as a temporary fix, I just made my bodies "padding-top" bigger to accomodate the wrapping until I can get the proper fix.</p>