Why is Bootstrap collapse function not working?-CodePudding

<nav id="na-vrh" >            
   <div >
      <a  href="#">Navbar</a>
      <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span ></span>
      </button>
      <div  id="navbarNav">
         <ul >
            <li >
               <a  href="#clanek1">Luka Dončić</a>
            </li>
            <li >
               <a  href="#clanek2">Goran Dragić</a>
            </li>
            <li >
               <a  href="#clanek03">Olimpija</a>
            </li>
            <li >
               <a  href="#dodaj-clanek">Dodaj nov članek</a>
            </li>
         </ul>
      </div>
   </div>
</nav>

So I'm having trouble implementing the Botstrapp hamburger menu. The problem is that it just doesn't crash ... I included the required link and script tags, but it still doesn't work. I also deleted all the body content and copied and pasted the entire navigation bar straight from the Bottstrap site, but it still doesn't work.

CodePudding user response：

Your code is good but I think you imported your scripts or styles for Bootstrap 5 incorrectly.

You can try to run the below snippet with full integration with your navigation bar.

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />

  <title>Hello, world!</title>
</head>

<body>
  <nav id="na-vrh" >
    <div >
      <a  href="#">Navbar</a>
      <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span ></span>
        </button>
      <div  id="navbarNav">
        <ul >
          <li >
            <a  href="#clanek1">Luka Dončić</a>
          </li>
          <li >
            <a  href="#clanek2">Goran Dragić</a>
          </li>
          <li >
            <a  href="#clanek03">Olimpija</a>
          </li>
          <li >
            <a  href="#dodaj-clanek">Dodaj nov članek</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- Adding your Bootstrap 5's Javascript here -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
</body>

</html>

CodePudding user response：

It would work if you include the bootstrap javascript.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">



<nav id="na-vrh" >            
   <div >
      <a  href="#">Navbar</a>
      <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span ></span>
      </button>
      <div  id="navbarNav">
         <ul >
            <li >
               <a  href="#clanek1">Luka Dončić</a>
            </li>
            <li >
               <a  href="#clanek2">Goran Dragić</a>
            </li>
            <li >
               <a  href="#clanek03">Olimpija</a>
            </li>
            <li >
               <a  href="#dodaj-clanek">Dodaj nov članek</a>
            </li>
         </ul>
      </div>
   </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>