Bootstrap 3 Menu Breakpoint change but now menu isnt collapsing - html

Question

Hey Guys so Im struggling to get this right. This is my code for the menu. I have successfully changed the breakpoint of the menu but now it doesnt collapse untill it hits the original breakpoint.
<nav class="navbar navbar-default" id="navigation-top-affix">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsemenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand visible-xs-block">Menu</div>
</div>
<div class="collapse navbar-collapse" id="collapsemenu">
<ul class="nav navbar-nav">
<li>Home</li>
<li>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Product Portfolio
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Allied products and commodities</li>
<li>Artisan and speciality bread mixes</li>
<li>Breads</li>
<li>Catering products</li>
<li>Chocolate products</li>
<li>Confectionery premixes</li>
<li>Dairy products and imitation creams</li>
<li>Decorative products</li>
<li>Equipment, hardware and smalls</li>
<li>Essences and colours</li>
<li>Fruit pie fullings and toppings</li>
<li>Functional ingredients</li>
<li>Leavening agents</li>
<li>Paper products, foils and packaging</li>
<li>Rolls premixes</li>
</ul>
</li>
<li>Yeast</li>
<li>Tools</li>
<li>Principals</li>
<li>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Forms
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Credit Application Form</li>
<li>Customer Request Form</li>
</ul>
</li>
<li>News</li>
<li>Product COAs</li>
<li class="last">Contact Us</li>
</ul>
</div>
</nav>
Ive made the breakpoint 1200px since the menu is so long. Here is the css ive used to overide the original breakpoint.
#media (max-width: 1200px) {
.navbar-header {
float: none !important;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block !important;
}
.navbar-collapse {
border-top: 1px solid transparent !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1) !important;
}
.navbar-fixed-top {
top: 0 !important;
border-width: 0 0 1px !important;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px !important;
}
.navbar-nav>li {
float: none !important;
}
.navbar-nav>li>a {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.collapse.in{
display:block !important;
}
}
The menu stays open (collapse.in class) and all the dropdowns are shown as normal dropdowns not the mobile version. Does anyone know how i can fix this or even why it is happening when every example ive looked at works perfectly fine.

Answer 1

if you want to solve your problem with bootstrap you have to define your custom responsive grid-float-breakpoint(#grid-float-breakpoint).To do this you have to customize bootstrap variables.less file. here is a Instructions also here. Other way you can manipulate your navbar with Jquery some example. I hope it helps

Answer 2

Just add #autocollapse to your nav tag. see code
function autocollapse() {
var navbar = $('#autocollapse');
navbar.removeClass('collapsed');
if(navbar.innerHeight() > 50) // check if we've got 2 lines
navbar.addClass('collapsed');
}
#autocollapse.collapsed .navbar-header {
float: none;
}
#autocollapse.collapsed .navbar-toggle {
display: block;
}
#autocollapse.collapsed .navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
#autocollapse.collapsed .navbar-collapse.collapse {
display: none!important;
}
#autocollapse.collapsed .navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
#autocollapse.collapsed .navbar-nav>li {
float: none;
}
#autocollapse.collapsed .navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
<nav id="autocollapse" class="navbar navbar-default" id="navigation-top-affix">