Bootstrap collapse responsive navbar closes back after opening it when on small screen
Question
The navbar works fine on the big screen but when you go to a mobile screen the collapse closes back after pressing the collapse icon.
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body style="background-color: #7e9094;"> <nav style="background-color: #213239;" class="navbar navbar-expand-lg navbar-dark"> <a class="navbar-brand active" href="index.html">Home</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" data-target="#demo" id="navbarText"> <ul class="navbar-nav" id="demo"> <li class="nav-item"> <a class="nav-link" href="shop/shop.html">Shop</a> </li> <li class="nav-item"> <a class="nav-link" href="projects/projects.html">Projects</a> </li> </ul> <span class="navbar-text"><a class="nav-link" href="index.html"><img style="float: right;" width="10%" src="img/image.img"></a></span> </div> </nav> </body> </html>
2 answers
solution1
0 2020-11-18 16:29:10
Just update the CDN link for your JavaScript to match the CSS. Both need to be on the 4.x version.
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body style="background-color: #7e9094;"> <nav style="background-color: #213239;" class="navbar navbar-expand-lg navbar-dark"> <a class="navbar-brand active" href="index.html">Home</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" data-target="#demo" id="navbarText"> <ul class="navbar-nav" id="demo"> <li class="nav-item"> <a class="nav-link" href="shop/shop.html">Shop</a> </li> <li class="nav-item"> <a class="nav-link" href="projects/projects.html">Projects</a> </li> </ul> <span class="navbar-text"><a class="nav-link" href="index.html"><img style="float: right;" width="10%" src="img/image.img"></a></span> </div> </nav> </body> </html>
solution2
0 2020-11-18 16:59:35
it is just a supplement to the answer of @isherwood and @MrUpsidown.
Indeed, you have incompatible css, jquery and bootstrap versions in your code.
If you want to use the latest version of Bootstrap, you should do like in an example from the answer above. It means you need the same version of css as the version of bootstrap is, 4.3.1. It is also recommended to use jquery slim build. You could read more on the'Getting started' guide for Bootstrap 4.3 .
If you actually need the bootstrap 3.4.1 (that actually was a typo in your code, I believe), you need different css and jquery for it as it follows from the 'Getting started' guide for Bootstrap 3.4 An example of navbar for that version of bootstrap you can find here .
In this case your code will be something like this:
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body style="background-color: #7e9094;"> <nav style="background-color: #213239;" class="navbar navbar-expand-lg navbar-default"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarText" aria-expanded="false"> <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="#">Home</a> </div> <div class="collapse navbar-collapse" data-target="#demo" id="navbarText"> <ul class="navbar-nav" id="demo"> <li class="nav-item"> <a class="nav-link" href="shop/shop.html">Shop</a> </li> <li class="nav-item"> <a class="nav-link" href="projects/projects.html">Projects</a> </li> </ul> <span class="navbar-text"> <a class="nav-link" href="index.html"><img style="float: right;" width="10%" src="img/image.img"></a> </span> </div> </nav> </body> </html>
But be careful. 3.4.1 and 4.3.1 are actually different versions :) Good luck with that!
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.