title: Bootstrap collapse navbar on overflow
body: <p>I am currently using Bootstrap 3.3.4. The content in my desktop navbar is too long at a certain point and so it overflows onto the next line.</p>
  
  <p>Below is an image outlining what I mean. </p>
  
  <p><img src="https://i.stack.imgur.com/ySZgr.png" alt="Example"></p>
  
  <p>You can see the logo pushes the links onto a new line when the browser is resized.</p>
  
  <p>This is my CSS which overrides a few Bootstrap Classes not much just a small amount of formatting such as a max width for the container fluid:</p>
  
  <pre><code>@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:700|Lusitana|Arimo);
  
  .container-fluid {
      width: 75%;
  }
  .navbar-spacer {
      height: 70px;
  }
  .navbar-header {
      padding-top: 10px !important; 
      padding-bottom: 0px !important;
  }
  .navbar-nav &gt; li &gt; a {
      padding-top: 25px !important; 
      padding-bottom: 25px !important;
  }
  .navbar-brand {
      padding-top: 10px !important; 
      padding-bottom: 10px !important;
      padding-left: 0px !important; 
  }
  .navbar {
      min-height: 70px !important
  }
  @media all and (max-width: 767px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 767px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 767px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 767px), only screen and (min-device-pixel-ratio: 2) and (max-width: 767px), only screen and (min-resolution: 192dpi) and (max-width: 767px), only screen and (min-resolution: 2dppx) and (max-width: 767px) {@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 950px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 950px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 950px), only screen and (min-device-pixel-ratio: 2) and (max-width: 950px), only screen and (min-resolution: 192dpi) and (max-width: 950px), only screen and (min-resolution: 2dppx) and (max-width: 950px) {
      .container-fluid {
          width: 100%;
      }
      .navbar-nav &gt; li &gt; a {
          padding-top: 15px !important; 
          padding-bottom: 15px !important;
      }
      .navbar-header {
          height: 70px;
      }
  }
  </code></pre>
  
  <p>This is the HTML/PHP for the navigation bar:</p>
  
  <pre><code>&lt;?php
      $currentFile = $_SERVER["PHP_SELF"];
      $parts = Explode('/', $currentFile);    
  ?&gt;
  &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
  &lt;div class='navbar-spacer'&gt;&lt;/div&gt;
  &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
    &lt;div class="container-fluid"&gt;
    &lt;a class="navbar-brand" href="./"&gt;&lt;img src='inc/img/UFCULogo.png'&gt;&lt;/a&gt;
      &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
  
      &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
      &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li &lt;?php if($parts[count($parts) - 1] == "index.php") { echo "class='active'"; } ?&gt;&gt;&lt;a href="./"&gt;&lt;span class='glyphicon glyphicon-home'&gt;&lt;/span&gt; Home&lt;/a&gt;&lt;/li&gt;
          &lt;li &lt;?php if($parts[count($parts) - 1] == "contact.php") { echo "class='active'"; } ?&gt;&gt;&lt;a href="./contact.php"&gt;&lt;span class='glyphicon glyphicon-phone-alt'&gt;&lt;/span&gt; Contact&lt;/a&gt;&lt;/li&gt;
          &lt;li &lt;?php if($parts[count($parts) - 1] == "benefits.php" || $parts[count($parts) - 1] == "newmembers.php") { echo "class='active'"; } ?&gt; class="dropdown"&gt;
            &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;&lt;span class='glyphicon glyphicon-user'&gt;&lt;/span&gt; Members &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu" role="menu"&gt;
              &lt;li &lt;?php if($parts[count($parts) - 1] == "benefits.php") { echo "class='active'"; } ?&gt;&gt;&lt;a href="./benefits.php"&gt;&lt;span class='glyphicon glyphicon-thumbs-up'&gt;&lt;/span&gt; Benefits&lt;/a&gt;&lt;/li&gt;
              &lt;li class="divider"&gt;&lt;/li&gt;
              &lt;li &lt;?php if($parts[count($parts) - 1] == "newmembers.php") { echo "class='active'"; } ?&gt;&gt;&lt;a href="./newmembers.php"&gt;&lt;span class='glyphicon glyphicon-plus'&gt;&lt;/span&gt; New Members&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li &lt;?php if($parts[count($parts) - 1] == "staff.php" || $parts[count($parts) - 1] == "map.php" || $parts[count($parts) - 1] == "times.php") { echo "class='active'"; } ?&gt; class="dropdown"&gt;
            &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;&lt;span class='glyphicon glyphicon-info-sign'&gt;&lt;/span&gt; About &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu" role="menu"&gt;
              &lt;li &lt;?php if($parts[count($parts) - 1] == "staff.php") { echo "class='active'"; } ?&gt;&gt;&lt;a href="./staff.php"&gt;&lt;span class='glyphicon glyphicon-user'&gt;&lt;/span&gt; Staff&lt;/a&gt;&lt;/li&gt;
              &lt;li class="divider"&gt;&lt;/li&gt;
              &lt;li &lt;?php if($parts[count($parts) - 1] == "map.php") { echo "class='active'"; } ?&gt;&gt;&lt;a href="./map.php"&gt;&lt;span class='glyphicon glyphicon-map-marker'&gt;&lt;/span&gt; Location&lt;/a&gt;&lt;/li&gt;
              &lt;li class="divider"&gt;&lt;/li&gt;
              &lt;li &lt;?php if($parts[count($parts) - 1] == "times.php") { echo "class='active'"; } ?&gt;&gt;&lt;a href="./times.php"&gt;&lt;span class='glyphicon glyphicon-time'&gt;&lt;/span&gt; Opening Times&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
    &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Again, I am using Bootstrap 3.3.4 so the suggestions I have found in previous posts won't seem to work.</p>
  
  <p>Here is a JSFiddle:</p>
  
  <p><a href="https://jsfiddle.net/zupu3L6t/" rel="nofollow noreferrer">https://jsfiddle.net/zupu3L6t/</a></p>
  
  <p>Simply, I am looking for suggestions to fix this, would it be best to collapse the navigation bar at 1000px or when the content overflows and how would I go about this.</p>
  
  <p>Hopefully I have included the necessary information, if not please inform me and I will happily provide it.</p>