Topic: Issue with MDB5 navbar toggler not working on mobile
Gymn Boing
asked 4 weeks ago
Hi everyone,I'm new to MDB and currently building a responsive website using MDB5 (free version). Everything looks great on desktop, but I’m having trouble with the navbar toggler on mobile devices. When I click the hamburger icon, nothing happens — the menu doesn’t expand.Here’s what I’ve tried so far:
- Verified that Bootstrap and MDB scripts are included correctly inthe HTML head
- Made sure I’m using the latest version of MDB5
- Checked browser console (no errors showing)
- Tested on Chrome and Safari (same issue)
Here’s a snippet of my navbar code:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">MySite</a>
<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>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<!-- more items -->
</ul>
</div>
</div>
</nav>
Am I missing something obvious? Do I need to initialize something with JavaScript for the toggler to work?
Thanks in advance for your help!
Kamila Pieńkowska
staff answered 3 weeks 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.
Open
- User: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 5.0.0
- Device: iPhone 13 / Samsung Galaxy S21 (issue appears on mobile)
- Browser: Chrome 116 / Safari 16
- OS: iOS 16.6 / Android 13
- Provided sample code: No
- Provided link: No