My bootstrap Toggle is disappearing after it is opened - html

Question

I'm trying to add bootstrap toggle navigation in 1024 width. I have written a media query for it but after opening the navigation, it suddenly hides.
Here is my css :
#media (max-width: 1024px) {
.navbar-header {
width: 100% !important;
}
.navbar-header .logo {
width: 400px !important;
float: left !important;
}
.responsive-logo {
margin-top: 0px !important;
padding-top: 0px !important;
}
.navbar-toggle {
display: block;
}
.bs-navbar-collapse.collapse {
display: none !important;
}
}
and Html Code :
<div class="container-fluid inverse">
<div class="navbar-header responsive-logo left">
<button class="navbar-toggle active" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="/05/logo2.png" class="img-responsive" alt="">
</div>
<div class="col-md-8">
<nav style="height: auto;" class="navbar-collapse bs-navbar-collapse collapse in" role="navigation" id="site-navigation">
<div class="col-md-7 col-md-offset-1 pdtp10">
<ul id="menu-top-menu" class="nav navbar-nav navbar-left responsive-nav main-nav-list">
<li id="menu-item-723" class="menu-item ">Philosophy</li>
<li id="menu-item-724" class="menu-item">Team</li>
<li id="menu-item-539" class="menu-item">Blog</li>
<li id="menu-item-540" class="menu-item ">Contact</li>
</ul>
</div>
<div class="col-md-4 pdtp20 lpno">
<div class="loginmenu">
<img src="05/user1.png">Angel Logout
</div>
</div>
</nav>
</div>
</div>

Answer 1

Check this DEMO
Add this CSS
#media (max-width: 2000px) {
.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;
}
}
Result