My bootstrap code for Navbar toggler is not working
Question
My code for navbar toggler is not working even after many attempts it shows the button but doesn't expand for the list and even for the desktop screen, it shows the toggle. Please Help
Edit-1: After adding https {before HTTP in jquery link} the toggle gets quickly collapsed, it is not holding the expanding form.
<head> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title></title> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand " href="#">Logo</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"> </span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ol class="navbar-nav ml-auto"> <li class="navbar-item"> <a class="nav-link" href="#">Contact</a> </li> <li class="navbar-item"> <a class="nav-link" href="#">Skills</a> </li> <li class="navbar-item"> <a class="nav-link" href="#">Profile</a> </li> </ol> </div> </nav> </body> </html>
1 answers
solution1
-2 ACCPTED 2020-05-20 10:39:35
Simple change HTTP to HTTPS for bootstrap.js resource. And changed version of that.
<head> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title></title> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand " href="#">Logo</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"> </span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ol class="navbar-nav ml-auto"> <li class="navbar-item"> <a class="nav-link" href="#">Contact</a> </li> <li class="navbar-item"> <a class="nav-link" href="#">Skills</a> </li> <li class="navbar-item"> <a class="nav-link" href="#">Profile</a> </li> </ol> </div> </nav> </body> </html>
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.
Related Question
My bootstrap navbar toggler is not working
Why is my Bootstrap [4.2] Navbar Toggler not working?
Why isn't my bootstrap navbar-toggler button working?
Bootstrap 4 Beta 2 navbar-toggler not Working
Bootstrap navbar toggler icon is not working on mobile
(asp.net) Bootstrap 4 Navbar toggler not working
bootstrap navbar-toggler button is not working
Bootstrap navbar-toggler
Navbar toggler not expanding (Bootstrap 5)
Navbar Toggler bootstrap 5
Related Tags