Ian Ian - 7 months ago 12
HTML Question

Bootstrap navbar collpase button works on PC but not laptop or phone

The bootstrap navbar collapse button only works on my PC and not my laptop or phone. My PC is running windows 7, my laptop is running windows 10, and I have an android phone. They're all updated as far as I know and they are all using chrome. I have been doing all the coding on codepen.

Link to codepen: https://codepen.io/mounti/pen/grBQBj

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarbutton">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Navbar Practice</a>
</div>
<div class="collapse navbar-collapse" id="navbarbutton">
<ul class="nav navbar-nav">
<li><a href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
</ul>
</div>
</div>
</nav>

</body>

Answer

You use a bad link in your bootstrap js CDN :

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

use this link :

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>