My toggler is not working. I have tried placing js cdn in top and bottom both but didn't work
Question
I tried placing the js cdn in top and it did not work. I was trying to make my navbar responsive and used toggler. The navbar became responsive but the toggler button is not working.
Here is my code, the hamburger menu is not working:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<section id="title">
<!-- Nav Bar -->
<nav class="navbar bg-dark navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">Tindog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="NssavbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
</section>
</body>
</html>
1 answers
solution1
0 2022-12-21 16:57:54
For Bootstrap V5 it's data-bs-toggle not data-toggle , plus you needed a "#" to point the target to an ID not a class. Lastly you had a typo "NssavbarSupportedContent" should be "navbarSupportedContent".
<:DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>TinDog</title> <.-- Latest compiled and minified CSS --> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap:min.css" rel="stylesheet"> <.-- Latest compiled JavaScript --> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <link rel="stylesheet" href="css/styles.css"> </head> <body> <section id="title"> <!-- Nav Bar --> <nav class="navbar bg-dark navbar-expand-lg navbar-dark"> <a class="navbar-brand" href="">Tindog</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link" href="">Contact</a> </li> <li class="nav-item"> <a class="nav-link" href="">Pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="">Download</a> </li> </ul> </div> </nav> </section> </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
CSS Modules in React JS not working, i have tried literally everything but it didn't solved
I have tried but my program doesn't seem to work
javascript if else statement not working. It returns singleStory even if I click on the twoStory image. I have tried != and ---
Is it possible to change the direction vertical slider in swiper slider? I want to have both top to bottom and bottom to top option?
$(document).ready can't replace js declared at bottom of the page, but I need to have the script at the top
I have tried to drag and drop an element. Why won't my code work properly?
i can't seem to get my hover effects to work on button. have tried many tips
Why my edit page didn't work in Laravel? I used vue.js
I tried using a fisher-yates shuffle for strings, but it didn't work
My headerStyle doesn't work. I have tried to assign a background color though it doesn't appear when I run it
Related Tags