I have made a simpel nav-bar with bootstrap(i copied from a working template). I've included the latest bootstrap.min.js and an unmodified css from bootwatch.
<div class="navbar navbar-default navbar-fixed-top" style="z-index:2;">
<div class="container">
<div class="navbar-header">
<a href="../" class="navbar-brand"></a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="../help/">Start</a>
</li>
<li>
<a href="../help/">Leverantörer</a>
</li>
</ul>
</div>
</div>
</div>
However the button won't trigger the menu when i run it on mobile. What have i done wrong?
Please check this JSFIDDLE link. The same code which you shared seems to be working fine.
I have included the css and JS of bootstrap from CDN.
<div class="navbar navbar-default navbar-fixed-top" style="z-index:2;"> <div class="container"> <div class="navbar-header"> <a href="../" class="navbar-brand"></a> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse" id="navbar-main"> <ul class="nav navbar-nav navbar-right"> <li> <a href="../help/">Start</a> </li> <li> <a href="../help/">Leverantörer</a> </li> </ul> </div> </div> </div>
Seems like you have missed adding the bootstrap.js file.
so just before closing body tag add this line.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body> > <!-- please note I have added it just before closing body tag -->
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.