title: Bootstrap 3 nav bar colapse not working correctly
body: <p>I want to change the break point at which the bootstrap collapses. I found some great answers on stack however they seem to not work correctly on my nav bar</p>
  
  <p>Here is how my navbar looks like: 
  <a href="https://i.stack.imgur.com/F2fcc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F2fcc.png" alt="navbar"></a></p>
  
  <p>Now I have this extra CSS for my nav bar to colapse when the width of the screen reaches 991px</p>
  
  <pre><code>@media (max-width: 991px) {
  .navbar-header {
      float: none;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
      margin: 7.5px -15px;
  }
  .navbar-nav&gt;li {
      float: none;
  }
  .navbar-nav&gt;li&gt;a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .navbar-text {
      float: none;
      margin: 15px 0;
  }
  /* since 3.1.0 */
  .navbar-collapse.collapse.in {
      display: block!important;
  }
  .collapsing {
      overflow: hidden!important;
  }
  }
  </code></pre>
  
  <p>When I resize my browser this i what happens: (see the red arrow for my problem).
  <a href="https://i.stack.imgur.com/63HbD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/63HbD.png" alt="Problem"></a></p>
  
  <p>Some of the links go out of the navigation bar. I would like it to work exactly the same as it works when I make the screen smaller and the original Bootstrap code kicks in for mobile devices (it just adds a scroll bar in nav bar and all menu elements are inside the navbar. </p>
  
  <p>This is how it looks like when I make the screen smaller and original bootstrap code kicks in:
  <a href="https://i.stack.imgur.com/iuGOh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iuGOh.png" alt="enter image description here"></a></p>
  
  <p>Here is the html code for my nav bar:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="navbar navbar-inverse navbar-fixed-top yellow_border_navigation"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&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;div class="collapse navbar-collapse" id="myNavbar"&gt;
        &lt;ul class="nav navbar-nav"&gt;
         &lt;li&gt;
       &lt;a href="index.php"&gt;&lt;img src="images/SingleLogo.png" height="64"&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="dropdown navigation_link_margin"&gt;
           &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Home
           &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
           &lt;ul class="dropdown-menu"&gt;
             &lt;li&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="index.php#IndexAbout"&gt;About&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="index.php#IndexContact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
         &lt;/li&gt;
         &lt;?php if(isset($_SESSION['id'])){?&gt;
       &lt;li class="navigation_link_margin"&gt;&lt;a href="profile.php"&gt;Profile&lt;/a&gt;&lt;/li&gt;
          &lt;?php } ?&gt;
      &lt;li class="navigation_link_margin"&gt;&lt;a href="clubs.php"&gt;Clubs&lt;/a&gt;&lt;/li&gt;
          &lt;li class="navigation_link_margin"&gt;&lt;a href="tournaments.php"&gt;Tournaments&lt;/a&gt;&lt;/li&gt;
          &lt;li class="navigation_link_margin"&gt;&lt;a href="leaderboard.php"&gt;Leaderboard&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
         &lt;?php if(!isset($_SESSION['id'])){?&gt;
          &lt;li&gt;&lt;a href="#registerModal" data-toggle="modal"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt; Register&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#LoginModal" data-toggle="modal"&gt;&lt;span class="glyphicon glyphicon-log-in"&gt;&lt;/span&gt; Login&lt;/a&gt;&lt;/li&gt;
      &lt;?php } else { ?&gt;
           &lt;li&gt;&lt;a href="message.php"&gt;&lt;?php navigation_display_new_messages(); ?&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li class="dropdown"&gt;
            &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;&lt;?php echo navigation_get_first_name(); ?&gt;
            &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
         &lt;?php side_menu_display(); ?&gt;
              &lt;li&gt;&lt;a href="account.php"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt; Account&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="credits.php"&gt;&lt;span class="glyphicon glyphicon-asterisk"&gt;&lt;/span&gt; Credits&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.php?logout"&gt;&lt;span class="glyphicon glyphicon-record"&gt;&lt;/span&gt; Log Out&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;?php } ?&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>