Menu
When I click away the menu doesn't hide, I found this code at: http://getbootstrap.com/components/#navbar but doesn't work as it should.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="index.php">
<img class="desktop-logo" src="img/logo.png" alt="Company title">
<img class="mobile-logo" src="img/logo-white.png" width="169" alt="">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class=""><a href="index.php">List</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Yes, I got: proper libraries installed: Bootstrap v3.0.3. There are no javascript errors, and the HTML code is valid.
Steps to reproduce: Download the bootstrap 3.0.3 zip package, make an index.html file, insert the css and js stuff for bootstrap. Enter the above code, and it's not closing when click or touched away.
So is the code meant to hide the menu or not ?
956
collapse('hide'); event. stopPropagation(); }); javascript.
Just add data-toggle="collapse" and a data-target to the element to automatically assign control of one or more collapsible elements. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element.
To create a collapsible navigation bar, use a button with class="navbar-toggler", data-toggle="collapse" and data-target="#thetarget" . Then wrap the navbar content (links, etc) inside a div element with class="collapse navbar-collapse" , followed by an id that matches the data-target of the button: "thetarget".
How it works. The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from it's current value to 0 .
I had the same problem and the solution was to make sure that bootstrap.js is not referenced more than once. I had it loaded two times in my page and this rendered described problem.
<script src="/js/bootstrap.min.js"></script>
Do not load it more than once!
167
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
