Navbar collapse at 992 without dropdown menu - html

Question

I changed bootstrap's navbar collapse at 992px breakpoint but it still show me dropdown menu
http://imgur.com/WR4LS2o,qHvd6RH#0
using this standard css code
#media (max-width: 991px) {
header nav.navbar-main.clearfix {
background-color: transparent;
}
.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 {
background-color: white;
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;
}
}
How can i do?
(I'm sorry for the external link but i dont have enought reputation to link an image)

Answer 1

The first method is to generate a custom bootstrap in overiding the
breakpoints.
( I think it's the best way because it does the whole job alone )
The second method is too add this css lines to your given code :
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu>li>a {
padding: 5px 15px 5px 25px;
}
.navbar-nav .open .dropdown-menu>li>a {
line-height: 20px;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
color: #777;
}
You can find a fiddle with a default navbar here

Answer 2

Solved in this way
#media (max-width: 991px) {
.navbar-main .navbar-nav li ul {
display: block;
position: inherit;
left: auto;
top: auto;
width: 100%;
background: transparent;
padding: 0 0 0 10px;
z-index: 1;
box-shadow: none;
}
.navbar-collapse.collapse.in {
overflow-y: auto;
}
}