Bootstrap 3 nav bar colapse not working correctly

Question

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

Here is how my navbar looks like:

Now I have this extra CSS for my nav bar to colapse when the width of the screen reaches 991px

@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>li {
    float: none;
}
.navbar-nav>li>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;
}
}

When I resize my browser this i what happens: (see the red arrow for my problem).

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.

This is how it looks like when I make the screen smaller and original bootstrap code kicks in:

Here is the html code for my nav bar:

<nav class="navbar navbar-inverse navbar-fixed-top yellow_border_navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
      	<li>
					<a href="index.php"><img src="images/SingleLogo.png" height="64"></a>
				</li>
				<li class="dropdown navigation_link_margin">
	        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Home
	        <span class="caret"></span></a>
	        <ul class="dropdown-menu">
	          <li><a href="index.php">Home</a></li>
	          <li><a href="index.php#IndexAbout">About</a></li>
	          <li><a href="index.php#IndexContact">Contact</a></li>
	        </ul>
	      </li>
      	<?php if(isset($_SESSION['id'])){?>
					<li class="navigation_link_margin"><a href="profile.php">Profile</a></li>
        <?php } ?>
				<li class="navigation_link_margin"><a href="clubs.php">Clubs</a></li>
        <li class="navigation_link_margin"><a href="tournaments.php">Tournaments</a></li>
        <li class="navigation_link_margin"><a href="leaderboard.php">Leaderboard</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
      	<?php if(!isset($_SESSION['id'])){?>
	      	<li><a href="#registerModal" data-toggle="modal"><span class="glyphicon glyphicon-user"></span> Register</a></li>
	        <li><a href="#LoginModal" data-toggle="modal"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
				<?php } else { ?>
	        <li><a href="message.php"><?php navigation_display_new_messages(); ?></a></li>
					<li class="dropdown">
		        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><?php echo navigation_get_first_name(); ?>
		        <span class="caret"></span></a>
		        <ul class="dropdown-menu">
							<?php side_menu_display(); ?>
		          <li><a href="account.php"><span class="glyphicon glyphicon-user"></span> Account</a></li>
							<li><a href="credits.php"><span class="glyphicon glyphicon-asterisk"></span> Credits</a></li>
		          <li><a href="index.php?logout"><span class="glyphicon glyphicon-record"></span> Log Out</a></li>
		        </ul>
	      	</li>
        <?php } ?>
      </ul>
    </div>
  </div>
</nav>

Answer 1

By default, Bootstrap break point for small devices is 768px. Assuming you have the bootstrap.css file (not the minified version), you can directly change the break point inside that file by changing the according 768px values to 991px.

However a more easy solution would be to override it by the following generic code, but it's not the cleanest nor efficient way to do it :

@media (max-width: 991px) {
.navbar-header {
    float: none;
}
.navbar-left,.navbar-right {
    float: none !important;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
}
.navbar-collapse.collapse {
    display: none!important;
}
.navbar-nav {
    float: none!important;
    margin-top: 7.5px;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}
.collapse.in{
    display:block !important;
}

}

Also you should use the "navbar-brand" class for your logo and place it right after the hamburger menu button :

<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">
    <img src="iimages/SingleLogo.png" alt="">
</a>

Answer 2

The max-height set by Bootstrap is clipping the mobile navbar. You can override like this...

  .collapse.in{
      display:block !important;
      max-height: initial;
  }

http://www.bootply.com/jv5TNZF9KM