Bootstrap dropdown menu not working in mobile view-CodePudding

I want that if I change to mobile view, the menu items will collapse and when I click it, then it shows the menu in dropdown. It seems this code does not work, what's wrong?

I want to click this icon and show menu item in dropdown. Check this image Mobile View

This is how it looks like in desktop view Desktop View

in HTML:

<nav >
<div >
  <a  href="#">Admin Panel</a>
  <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
    <span ></span>
  </button>
  <div  id="navbarSupportedContent">
    <ul >
      <div >
        <li >
          <a  aria-current="page" href="home.php">View Event</a>
        </li>
        <li >
          <a  href="add_event.php">Add Event</a>
        </li>
        <li >
          <div >
            <button type="button"  id="navbarDropdown" data-toggle="dropdown">
              User
            </button>
            <div  aria-labelledby="navbarDropdown">
              <a  href="userFeedback.php">Feedback</a>
              <a  href="userProblem.php">Issues</a>
              <div ></div>
              <a  onclick="logoutChecker()" href="index.php">Logout</a>
            </div>
          </div>
        </li>
      </div>
    </ul>
  </div>
</div>

then the script:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> 
</script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

CodePudding user response：

Hey you have some extra text in your button

<button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">

Instead of using data-bs-toggle="collapse" and data-bs-target="#navbarSupportedContent" you have to use data-toggle="collapse" and data-target="#navbarsExample01" take out the bs as you are using bootstrap 4 for more information you can check de Docs in Bootstrap official site.

Also don't forget to close your nav tag at the end of your code

CodePudding user response：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

</head>
<body>
<nav >
    <div >
        <a  href="#">Admin Panel</a>
        <button  type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
        </button>
        <div  id="navbarSupportedContent">
            <ul >
                <div >
                    <li >
                        <a  aria-current="page" href="home.php">View Event</a>
                    </li>
                    <li >
                        <a  href="add_event.php">Add Event</a>
                    </li>
                    <li >
                        <div >
                            <button type="button"  id="navbarDropdown" data-toggle="dropdown">
                                User
                            </button>
                            <div  aria-labelledby="navbarDropdown">
                                <a  href="userFeedback.php">Feedback</a>
                                <a  href="userProblem.php">Issues</a>
                                <div ></div>
                                <a  onclick="logoutChecker()" href="index.php">Logout</a>
                            </div>
                        </div>
                    </li>
                </div>
            </ul>
        </div>
    </div>
</nav>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</body>
</html>

Use this code for the navbar toggle button

<button  type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span ></span>
</button>