Bootstrap collapsing menu stays on in after changing media query - html

Question

Using bootstrap.
I changed breakpoint to collapse menu in 991px.
Menu are collapsing, but stays expended in sm. Works fine in xs.
It looks like collapsing, but is not disappearing.
Can't figure put whats is causing that.
Link below.
https://jsfiddle.net/marko_lt/spa8Ls1d/
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="meniu">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#meniucollapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo-box">
<a class="navbar-brand" href="{% url 'home' %}">
<img id="logotipas" src="{% static 'images/log_pure_small.jpg' %}" alt="logo"/>
</a>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="meniucollapse">
<ul class="nav navbar-nav">
<li><a data-toggle="collapse" data-target="#meniucollapse" href="#paslaugos" ><span>1 link </span></a></li>
<li><a data-toggle="collapse" data-target="#meniucollapse" href="#marsrutas"><span>2 link </span></a></li>
<li><a data-toggle="collapse" data-target="#meniucollapse" href="#kainos"><span>3 link </span></a></li>
<li><a data-toggle="collapse" data-target="#meniucollapse" href="#taisykles"><span>4 link </span></a></li>
<li><a data-toggle="collapse" data-target="#meniucollapse" href="#kontaktai"><span>5 link </span></a></li>
</ul>
</div>
</div>
</
CSS:
.navbar-default {
background-image:none;
background-color: #373737;
}
/*BIG SCREENS*/
#media all and (min-width: 991px) {
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav > li > a {
width: 120px;
height: 65px;
font-size: 16px;
border-left: 10px solid #178ACC;
transform: skewX(-45deg);
background-color: #000;
color: #f4ebeb;
}
.navbar-default .navbar-nav > li > a >span {
display:inline-block;
transform: skewX(45deg);
vertical-align: middle;
padding-top: 5px;
padding-left: 2px;
}
.navbar-default .navbar-nav > .active #uzsakymo-linkas {
background-color: #FC6607;
color:#fff;
margin:0px;
width:160px;
border-right: 10px solid #178ACC;
}
.navbar-default .navbar-nav > li>#uzsakymo-linkas > span {
padding-top: 0px;
padding-left: 0px;
text-align: center;
}
} /*end of big screens*/
/*SMALL SCREENS*/
#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-default .navbar-nav>.active>a,
.navbar-nav>li>a
{
padding-top: 5px;
padding-bottom: 5px;
color: #727272;
width: 500px;
border-left: 5vw solid #178ACC;
height: 40px;
font-size: 16px;
color: #f4ebeb;
background-color: #000;
}
.navbar-default .navbar-nav > li > a >span {
display:inline-block;
vertical-align: middle;
padding-top: 5px;
padding-left: 2px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/*.navbar-collapse .collapse .in { */
.navbar-collapse .collapse .in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
} /*end small screens*/

Answer 1

I changed your css-code for small-screen to css-code I used before and it worked fine, of course, I put your properties for li a span:
#media (max-width: 990px) {
.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-default .navbar-nav>.active>a,
.navbar-nav>li>a {
padding-top: 5px;
padding-bottom: 5px;
color: #727272;
width: 500px;
border-left: 5vw solid #178ACC;
height: 40px;
font-size: 16px;
color: #f4ebeb;
background-color: #000;
}
.navbar-default .navbar-nav > li > a > span {
display:inline-block;
vertical-align: middle;
padding-top: 5px;
padding-left: 2px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
jsfiddle-link