Why has my nav toggle button on mobile phones or on small screens no function? I use bootstrap and can't find my mistake. My navbar should be responsive.

<nav class="navbar navbar-expand-sm navbar-light bg-light">
<button
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarNav"
        class="navbar-toggler"
        aria-controls="navbarNav"
        aria-expanded="false"
        aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
        <li class="nav-item active">
            <a class="nav-link active" href="dashboard.php">Dashboard</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="shareOverview.php">Verwaltung</a>
        </li>
        <li class="nav-item active">
            <a class="nav-link" href="addShare.php">Neue Aktie</a>
        </li>
        <?php
        if (isset($_SESSION['name'])) {
            ?>
            <li class="nav-item active">
                <a class="nav-link" href="logout.php">Logout</a>
            </li>
            <?php
        }
        ?>
    </ul>
</div>
</nav>

CodePudding user response：

Are you using Bootstrap 4 or Bootstrap 5? It’s data-toggle instead of data-bs-toggle for Bootstrap 4.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <button
          type="button"
          data-toggle="collapse"
          data-target="#navbarNav"
          class="navbar-toggler"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
          <li class="nav-item active">
              <a class="nav-link active" href="dashboard.php">Dashboard</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="shareOverview.php">Verwaltung</a>
          </li>
          <li class="nav-item active">
              <a class="nav-link" href="addShare.php">Neue Aktie</a>
          </li>
      </ul>
  </div>
</nav>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You added some wrong attributes on button tag. I fixed it and the code is below. Thank you.

    <nav class="navbar navbar-expand-sm navbar-light bg-light">
<button
        type="button"
        data-toggle="collapse"
        data-target="#navbarNav"
        class="navbar-toggler"
        aria-controls="navbarNav"
        aria-expanded="false"
        aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
        <li class="nav-item active">
            <a class="nav-link active" href="dashboard.php">Dashboard</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="shareOverview.php">Verwaltung</a>
        </li>
        <li class="nav-item active">
            <a class="nav-link" href="addShare.php">Neue Aktie</a>
        </li>
        <?php
        if (isset($_SESSION['name'])) {
            ?>
            <li class="nav-item active">
                <a class="nav-link" href="logout.php">Logout</a>
            </li>
            <?php
        }
        ?>
    </ul>
</div>