javascript - Bootstrap navbar-toggle alway open -
i button (navbar-toggle ) visible @ time tested: http://jsfiddle.net/kylemit/m49bb/ , works 50/50. button time. if click button menu pops @ moments , disappears.
maybe more understandable: 1. click on button. 2. see menu 2s. 3. again, don't see menu.
i used bootstrap v3.3.4
<nav class="navbar navbar-default navbar-static-top always-open" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">{{projecttitle()}}</a> </div> <div id="navbar" class="navbar-collapse collapse"> {{ menu() | raw}} </div><!--/.nav-collapse --> </div> </nav>
css
.navbar.always-open { border-radius: 0; } .navbar.always-open .navbar-header { float: none; } .navbar.always-open .navbar-toggle { display: block; } .navbar.always-open .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .navbar.always-open .navbar-collapse.collapse { display: none!important; } .navbar.always-open .navbar-nav { float: none!important; margin: 7.5px -15px; } .navbar.always-open .navbar-nav>li { float: none; } .navbar.always-open .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; }
in bootstrap.css choose:
.navbar-collapse.collapse{ height:auto!important; padding-bottom:0; overflow:visible!important }
(delete display: block !important) , in css:
.navbar.always-open .navbar-collapse.collapse { display: none; } .navbar.always-open .navbar-collapse.in { display: block; }
Comments
Post a Comment