Topic: Issue with Navbar Responsiveness in MDB Standard v5.1.0
Castle Keepers
asked 6 days ago
Hi, I’m working on a firearms training website using MDB Standard v5.1.0. I set up a responsive navbar with a toggler for mobile view, but the collapse/expand behavior isn’t working properly. On smaller screens, the menu button appears, but clicking it doesn’t expand the navigation links.
I followed the docs and included the required CSS/JS files, but maybe I’m missing something. MDB Navbar Test Castle Keepers
<!-- Toggler -->
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Training</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Safety</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
<!-- Collapsible content -->
</div>
Has anyone run into this issue? Do I need to initialize JavaScript manually, or should it work out of the box?
Thanks in advance for any guidance!
Kamila Pieńkowska
staff answered 3 days ago
You are using the current syntax with legacy versions. Initiation with data attributes was introduced in v7. You need to reference this version of the documentation:
https://v5-standard-5.legacydocs.mdbootstrap.com/docs/standard/
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 9.1.0
- Device: Desktop & iPhone (tested both)
- Browser: Chrome (latest), Safari (iOS)
- OS: Windows 10, iOS 17
- Provided sample code: No
- Provided link: No