Toggle button collapse not working in Bootstrap navbar
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?
Answer
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.