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>

https://stackoverflow.com/a/66312595/6127393 – Arleigh Hix Dec 22 '22 at 05:25 — Arleigh Hix, Dec 22 '22 at 05:25

score 0 · Accepted Answer · answered Dec 21 '22 at 16:57

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>

My toggler is not working. I have tried placing js cdn in top and bottom both but didn't work

1 Answers1