bootstrap navbar toogler not working on small screen
Question
not working on click I am using bootstrap for my navbar but when I resize my screen navbar toggle is not working
here is what I am trying?
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="#">
Spritual yatra
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse " id="myMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a href="#" class="nav-link active">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">About us</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
</div>
</nav>
</body>
1 answers
solution1
0 2019-04-07 12:24:07
Your code works well for me. Could you show how you referenced jQuery file?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <body> <nav class="navbar navbar-expand-sm navbar-dark bg-dark"> <a class="navbar-brand" href="#"> Spritual yatra </a> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myMenu"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse " id="myMenu"> <ul class="navbar-nav ml-auto"> <li class="nav-item"><a href="#" class="nav-link active">Home</a></li> <li class="nav-item"><a href="#" class="nav-link">About us</a></li> <li class="nav-item"><a href="#" class="nav-link">Contact</a></li> </ul> </div> </nav> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </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 toogler button is just showing not working
Bootstrap navbar to top on small screen size
Bootstrap NavBar opacity for small and large screen
Bootstrap small window navbar dropdown not working
Bootstrap :Remove navbar brand when on small screen, f.e. mobile
Bootstrap collapse responsive navbar closes back after opening it when on small screen
Navbar is not showing in small screen which bootstrap class or css I have to use
dropdown list not working properly on small mobile screen using react bootstrap
Navbar button not working on small devices
Javascript is not working in Bootstrap navbar
Related Tags