Dropdown in toggler dont work / bootstrap

user_19547328 0
Viewed 43

I have navbar with lot of lists. I want to use dropdown and toogler on mobile devices. Problem is when navbar is toggled dropdown menu after touch will close whole toogler.

<nav class="navbar navbar-expand-xl navbar-light sticky-top py-3 d-block" data-navbar-on-scroll="data-navbar-on-scroll">
      <div class="container"><a class="navbar-brand" href="index.html"><img src="assets/img/gallery/logo-n.png" height="45" alt="logo" /></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon">
          </span></button>
        <div class="collapse navbar-collapse border-top border-lg-0 mt-4 mt-lg-0" id="navbarSupportedContent">
          <ul class="navbar-nav ms-auto pt-2 pt-lg-0 font-base">
            <li class="nav-item px-2"><a class="nav-link active" aria-current="page" href="index.html">Domů</a></li>
            <li class="nav-item dropdown zakldropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Základní škola
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Chrakteristika ZŠ</a></li>
            <li><a class="dropdown-item" href="#">Organizace školního roku</a></li>
            <li><a class="dropdown-item" href="#">Školská rada</a></li>

        </ul>
        <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="web-development.html">Mateřská škola</a></li>
        <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">Jídelna</a></li>
        <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">EKOškola MŠ a ZŠ</a></li>
        <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">Družina</a></li>
        <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">Málinka z. s.</a></li>
        <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">Dokumenty</a></li>
        <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">Kontakty</a></li>
        </ul>


      </div>
      </div>
      </div>
    </nav>
twitter-bootstrap css html
2 Answers

I once had the same problem. In my case I didn't add the following line in my code

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Aswel make sure if you have this code you comment this part of code out

<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->

Make sure you have the template that they recommand: Starter template

https://getbootstrap.com/docs/5.0/getting-started/introduction/

user_166244730 

<nav class="navbar navbar-expand-xl navbar-light sticky-top py-3 d-block" data-navbar-on-scroll="data-navbar-on-scroll">
    <div class="container">
        <a class="navbar-brand" href="index.html">
            <img src="assets/img/gallery/logo-n.png" height="45" alt="logo" />
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon">
            </span></button>
        <div class="collapse navbar-collapse border-top border-lg-0 mt-4 mt-lg-0" id="navbarSupportedContent">
            <ul class="navbar-nav ms-auto pt-2 pt-lg-0 font-base">
                <li class="nav-item px-2"><a class="nav-link active" aria-current="page" href="index.html">Domů</a></li>
                <li class="nav-item px-2 dropdown zakldropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Základní škola
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <li><a class="dropdown-item" href="#">Chrakteristika ZŠ</a></li>
                        <li><a class="dropdown-item" href="#">Organizace školního roku</a></li>
                        <li><a class="dropdown-item" href="#">Školská rada</a></li>
                    </ul>
                </li>
                <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="web-development.html">Mateřská škola</a></li>
                <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">Jídelna</a></li>
                <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">EKOškola MŠ a ZŠ</a></li>
                <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">Družina</a></li>
                <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">Málinka z. s.</a></li>
                <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">Dokumenty</a></li>
                <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">Kontakty</a></li>
            </ul>
        </div>
    </div>
</nav>

I check it works but you forgot to close a tag

user_195745190
Related