collapsible menu with html is not working

Viewed 17

Please help. When I want to make my website smaller, the collapsible menu is not showing the three lists by clicking on it.

I am using links script src="http://code.jquey.com/jquery-1.11.2.min.js"/script** or I have wrong link to the jquery.com. This is the course from coursera.com (thank you)

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>David Chu's China Bistro</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;500;700&family=Nunito:wght@300;400;600;700&family=Open+Sans:
        wght@400;600&family=Oxygen:wght@300;400;700&family=Roboto:wght@500&display=swap" rel="stylesheet">


</head>

<body>
  <header>
    <nav id="header-nav" class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a href="index.html" class="pull-left visible-md visible-lg">
            <div id="logo-img" alt="Logo image"></div>
          </a>

          <div class="navbar-brand">
            <a href="index.html">
              <h1>David Chu's China Bistro</h1>
            </a>
            <p>
              <img src="images/star-k-logo.png" alt="Kosher 
                                certificaion">
              <span>Kosher Certified</span>
            </p>
          </div>

          <button type="button" class="navbar-toggle collapsed" data- toggler="collapse" data-target="#collapsable-nav" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
        </div>

        <div id="collapsable-nav" class="collapse navbar-collapse">
          <ul id="nav-list" class="nav navbar-nav navbar-right">
            <li>
              <a href="menu-categories.html">
                <span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs"> Menu</a>
            </li>
            <li>
              <a href="#">
                <span class="glyphicon glyphicon-info-sign"></span><br class="hidden-xs"> About</a>
            </li>
            <li>
              <a href="#">
                <span class="glyphicon glyphicon-certificate"></span><br class="hidden-xs"> Awards</a>
            </li>
            <li id="phone" class="hidden-xs">
              <a href="tel:410-602-5008">
                <span>410-602-5008</span></a>
              <div>* We Deliver</div>
            </li>
          </ul>
          <!-- #nav-list -->
        </div>
        <!-- .collapse .navbar-collapse -->
      </div>
    </nav>
  </header>
  <script src="http://code.jquey.com/jquery-1.11.2.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>




</body>

</html>

1 Answers

You imported wrong bootstrap.bundle.js. First, you must change data-toggler to data-toggle on button tag.

You should import this. It works well.

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
Related