Simple bootstrap navbar not collapsing on mobile
Question
Perhaps I am missing or not understanding something, however, I have tried everything possible and end up with the same result.
MY PROBLEM
I have dumbed down my page to the point where I simply took the example from w3schools for a responsive navbar. When I resize my browser window the navbar collapses as it should. In my JSFIDDLE the navbar collapses as it should, however as soon as I go to a mobile device my navbar is not collapsing ...what am I doing wrong here?
BROWSER RESIZE
Browser resize working as it should!
MOBILE DEVICE
Mobile Device NOT WORKING, why? What Am I doing wrong here? Here is a link to my JSFIDDLE
<head>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" </script>
</head>
<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="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
2 answers
solution1
3 ACCPTED 2017-03-14 04:30:09
You seems to be missing the Viewport tag in your code, double check your code and make sure you have viewport tag available, if not add the following code:
<meta name="viewport" content="width=device-width, initial-scale=1">
Your JSFiddle example is working fine when its resized to smaller width
solution2
0 2017-03-14 04:43:34
try this one:
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, manimum-scale=1.0, maximum-scale=1.0" />
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.