When I shrink the window and click the button it doesn't work. Button doesn't respond. What seems to be the problem here could anyone tell me please?
<button type="button"
class="navbar-toggle"
data-toggle="collapse"
data-target=".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>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="">Page 1</a>
</li>
<li>
<a href="">Page 2</a>
</li>
<li>
<a href="">Page 3</a>
</li>
</ul>
Libraries are jQuery 2.1.3 and bootstrap 3.3.1.
This question is related to
twitter-bootstrap
twitter-bootstrap-3
because u have to have jquery set-up to enable the toggling functionality of the toggler button. So, all u have to do is to add bootstrap.bundle.js before bootstrap.css:
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
If you will change the ID then Toggle will not working same problem was with me i just change
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav">
id="defaultNavbar1" then toggle is working
Demo: http://jsfiddle.net/u1s62Lj8/1/
You need the jQuery and Boostrap Javascript files included in your HTML page for the toggle to work. (Make sure you include jQuery before Bootstrap.)
<html>
<head>
// stylesheets here
<link rel="stylesheet" href=""/>
</head>
<body>
//your html code here
// js scripts here
// note jquery tag has to go before boostrap
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Wasted several hours only to realize that viewport meta was missing from my code. Adding here just in case some one else misses it out.
As soon as I added this, the toggle started working fine.
<meta name="viewport" content="width=device-width, initial-scale=1">
Remember load jquery before bootstrap js
Source: Stackoverflow.com