Dropdown in toggler dont work / bootstrap - html

Question

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>

Answer 1

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/

Answer 2

<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