Bootstrap burger nav menu not opening in mobile browser
Question
I'm using bootstrap stylesheets.
The following code is for my navigation panel. This works fine on my desktop browser but when I reduce the browser size or test on a mobile device, the burger menu appears but does not expand to display the contents of the navigation as expected.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'> <body> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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 color-me" href="#home">Home</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="#about-me">About</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="##">Page 1</a></li> <li><a href="##">Page 2</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> <!-- container --> </nav>
Am I missing something in my HTML? I don't understand where the problem is!
3 answers
solution1
1 ACCPTED 2018-01-31 12:13:28
please include this line and will work .
Note: Include in this order - include Jquery before Bootstrap.Bootstrap need Jquery to be loaded before Bootstrap.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
you are missing the javascript library so that the event isnot responded ,
solution2
1 2018-01-31 13:04:24
Seem that you missed include bootstrap js file. Please check https://getbootstrap.com/docs/3.3/getting-started/
solution3
1 2020-03-15 17:04:51
I guess using the bootstrap.min.js for the issues won't solve the problem until and unless you do not include the jquery in bootstrap@3
please also include the following link or get it through dist folder of javascript
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
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.