html - My bootstrap Toggle is disappearing after it is opened -

i'm trying add bootstrap toggle navigation in 1024 width. have written media query after opening navigation, hides.

here 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>         <a href="#" class="logo"><img src="/05/logo2.png" class="img-responsive" alt=""></a>     </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 "><a href="#">philosophy</a></li>                     <li id="menu-item-724" class="menu-item"><a href="#">team</a></li>                     <li id="menu-item-539" class="menu-item"><a href="#">blog</a></li>                     <li id="menu-item-540" class="menu-item "><a href="#">contact</a></li>                 </ul>             </div>             <div class="col-md-4 pdtp20 lpno">                 <div class="loginmenu">                     <a href="#/"><img src="05/user1.png">angel logout</a>                 </div>             </div>         </nav>     </div> </div> 

check demo

add 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