CODEWITHSUNDEEP
htmlcssbootstrap-5
BlackdestinyXX
BlackdestinyXX

Reputation: 356

Bootstrap navbar toggler doesn't work on mobile

I have a problem with Boostrap 5 navbar. It doesn't work on mobile. When I click the toggle button nothing happens.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="/">The Wumpus's inn</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarScroll">
            <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="/addbot">Aggiungi il tuo bot</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="/login" id="username">Login</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="https://discord.gg/6rZbYjGXKr">Server Discord</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Upvotes: 1

Views: 1643

Answers (1)

Jakub Muda
Jakub Muda

Reputation: 6714

Your HTML looks OK. I assume you forgot to add Bootstrap JavaScript. This is required for toggler button to work. See example below.

Navbar docs: https://getbootstrap.com/docs/5.0/components/navbar/

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="/">The Wumpus's inn</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="/addbot">Aggiungi il tuo bot</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="/login" id="username">Login</a>
        </li>
        <li class="nav-item" id="logout">

        </li>
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="https://discord.gg/6rZbYjGXKr">Server Discord</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Upvotes: 3

Related Questions