CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
f1a2j3n
f1a2j3n

Reputation: 21

Hamburger button on bootstrap wont open

I have followed the code from BootStrap as follows:

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

<!-- Nav Bar -->
<nav class="navbar bg-dark navbar-expand-lg navbar-dark">
  <a class="navbar-brand" href="index.html">One Basket</a>
  <button class="navbar-toggler ms-auto" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarToggleExternalContent2" aria- controls="navbarToggleExternalContent2" aria-expanded="false" aria-label="Toggle navigation">          
         <span class="navbar-toggler-icon"></span>
       </button>
  <div class="collapse navbar-collapse" id="navbarToggleExternalContent2">
    <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>

I have also added the CSS from the bootstrap documentation and the javascript to the HTML file. The JS is at the end before the close body tag, just like it says on the bootstrap website.

The CSS is the first link tag in the head. But when I try to press the button nothing happens.

Upvotes: 0

Views: 59

Answers (1)

Yaroslav Trach
Yaroslav Trach

Reputation: 2011

You have wrong attributes to make it work by default, just replace data-mdb-toggle="collapse" data-mdb-target="#navbarToggleExternalContent2" with data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent2", see (in my CodeSnippet I using BS v5.1):

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


<!-- Nav Bar -->
<nav class="navbar bg-dark navbar-expand-lg navbar-dark">
  <a class="navbar-brand" href="index.html">One Basket</a>
  <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent2" aria- controls="navbarToggleExternalContent2" aria-expanded="false" aria-label="Toggle navigation">          
     <span class="navbar-toggler-icon"></span>
   </button>
  <div class="collapse navbar-collapse" id="navbarToggleExternalContent2">
    <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>

Upvotes: 1

Related Questions