First time here. I am having trouble with my Bootstrap 5.1 Navbar menu. Some background: I am hosting my website locally via Xampp and my pages are php to allow for forms and cookies. Everything works great on the desktop. I have tested the responsiveness of my site in DevTools on different sized devices and the dropdown menu (the collapsed navigation menu) works perfectly on those. I then tried the dropdown menu on my S21 Ultra and Tab S6 using the locally hosted server. While the hamburger toggler will appear, it will not drop down the menu. I tried removing the button icon so that I could see if the button is toggling and it is, but it doesn't seem to be actually changing any of the values of the navbar as it does on the desktop or in the DevTools. I have tried everything. My code is up-to-date and the js and css for Bootstrap are placed in the correct locations. Please help.
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span><i id="s1-title-navbar-toggler" class="fas fa-chevron-down"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">REDACTED</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">REDACTED</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">*REDACTED*</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">*REDACTED*</a>
</li>
</ul>
</div>
</nav>
Again, it works fine on desktop and in mobile view using DevTools on Chrome. Any changes (CSS-wise) are only to color and size so they should not interfere. All other buttons on the webpage work. I am really unsure how to move forward.
All I need is for the drop-down menu to open when using a mobile device.
Remove the -bs- from data-bs-target and data-bs-toggle like below.
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span><i id="s1-title-navbar-toggler" class="fas fa-chevron-down"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">REDACTED</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">REDACTED</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">*REDACTED*</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">*REDACTED*</a>
</li>
</ul>
</div>
</nav>