Bootstrap collapse navbar on overflow

Question

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.

Below is an image outlining what I mean.

You can see the logo pushes the links onto a new line when the browser is resized.

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:

@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 > li > 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 > li > a {
        padding-top: 15px !important; 
        padding-bottom: 15px !important;
    }
    .navbar-header {
        height: 70px;
    }
}

This is the HTML/PHP for the navigation bar:

<?php
    $currentFile = $_SERVER["PHP_SELF"];
    $parts = Explode('/', $currentFile);    
?>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class='navbar-spacer'></div>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
  <a class="navbar-brand" href="./"><img src='inc/img/UFCULogo.png'></a>
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li <?php if($parts[count($parts) - 1] == "index.php") { echo "class='active'"; } ?>><a href="./"><span class='glyphicon glyphicon-home'></span> Home</a></li>
        <li <?php if($parts[count($parts) - 1] == "contact.php") { echo "class='active'"; } ?>><a href="./contact.php"><span class='glyphicon glyphicon-phone-alt'></span> Contact</a></li>
        <li <?php if($parts[count($parts) - 1] == "benefits.php" || $parts[count($parts) - 1] == "newmembers.php") { echo "class='active'"; } ?> class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class='glyphicon glyphicon-user'></span> Members <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li <?php if($parts[count($parts) - 1] == "benefits.php") { echo "class='active'"; } ?>><a href="./benefits.php"><span class='glyphicon glyphicon-thumbs-up'></span> Benefits</a></li>
            <li class="divider"></li>
            <li <?php if($parts[count($parts) - 1] == "newmembers.php") { echo "class='active'"; } ?>><a href="./newmembers.php"><span class='glyphicon glyphicon-plus'></span> New Members</a></li>
          </ul>
        </li>
        <li <?php if($parts[count($parts) - 1] == "staff.php" || $parts[count($parts) - 1] == "map.php" || $parts[count($parts) - 1] == "times.php") { echo "class='active'"; } ?> class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class='glyphicon glyphicon-info-sign'></span> About <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li <?php if($parts[count($parts) - 1] == "staff.php") { echo "class='active'"; } ?>><a href="./staff.php"><span class='glyphicon glyphicon-user'></span> Staff</a></li>
            <li class="divider"></li>
            <li <?php if($parts[count($parts) - 1] == "map.php") { echo "class='active'"; } ?>><a href="./map.php"><span class='glyphicon glyphicon-map-marker'></span> Location</a></li>
            <li class="divider"></li>
            <li <?php if($parts[count($parts) - 1] == "times.php") { echo "class='active'"; } ?>><a href="./times.php"><span class='glyphicon glyphicon-time'></span> Opening Times</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Again, I am using Bootstrap 3.3.4 so the suggestions I have found in previous posts won't seem to work.

Here is a JSFiddle:

https://jsfiddle.net/zupu3L6t/

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.

Hopefully I have included the necessary information, if not please inform me and I will happily provide it.

Answer 1

If you use bootstrap 3.3.4, then, on line 4097, you have the following code

@media (min-width: 768px) {
.navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
 }
.navbar-collapse.in {
    overflow-y: visible;
}
.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
    padding-right: 0;
    padding-left: 0;
}
}

All you have to do is to replace

@media (min-width: 768px) {

with

@media (min-width: 1000px) {

and you will have a collapsing nav on 1000px. Tell me if it doesn't work.

Hope it helps. +1 if it does.