Menu
My toggle button is not working when the navbar collapses. I have checked the data-target several times and looks ok.
Here is my code:
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html" title="The Title">
<img style="max-width:100px;" src="images/LOGO-4.png">
</a>
<div class="collapse navbar-collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active"><a href="#">WORK</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
Does anybody know what the problem is and how I can fix it?
327
Of course your toggle button will differ based on your screen resolution. Try something along the lines of:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body >
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html" title="The Title">
<img style="max-width:100px;" src="images/LOGO-4.png">
</a>
</div>
<div class="collapse navbar-collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav pull-right">
<li class="active"><a href="#">WORK</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Try this out on your mobile and see. Afterwards go into your css file and set the properties for screen size on WHEN should the toggle button appear to be. The toggle button might not appear on the desktop until you change these properties, or resize your browser window smaller, and smaller until the toggle button appears.
Eg. Maximized on my browser window, the toggle button doesn't appear.
However if you resize your browser window by half(or if you're surfing on a phone), it'll look like this
To fix this you'll need to go into your css settings. But this is ONLY if you want to change it. Otherwise it'll work fine.
137
See that you have correct import of library, i hade a same problem, i dont why sometimes it has strange behavior with different version of Jquery
Try this
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" 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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
Every time we are facing this problem "why is navbar-toggle button not working?", but this time we have found the solution and specially thanks for google chrome developer team for developed showing error clearly.
We should include jquery library file before bootstrap javascript file.
2
Hope it will help because I had the same problem and fixed it by this:
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
...
</nav>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
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
