Topic: NavBar Collapse not working in mdb 5 3.0.0+
jeffpfoster asked 4 years ago
Expected behavior The collapse button expands the menu on mobile/small screens.
Actual behavior The collapse button isn't expanding the menu on mobile/small screens.
Resources (screenshots, code snippets etc.)
<!-- Navbar brand -->
<a class="navbar-brand" href="/">
<img
src="img/logo.png"
height="100"
alt=""
loading="lazy"
style="margin-top: -3px;"
/>
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarExample01"
aria-controls="navbarExample01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarExample01">
The code above works on 2.2.1 but modals code isn't working there. Then move to 3.0.0+ (3.1.0 tried as well) and the code doesn't work for collapse but the modal does work.
Wojstan staff answered 4 years ago
Try changing data attributes, for example: data-mdb-toggle
instead of data-toggle
, due to MDB new release.
See here for more information: https://mdbootstrap.com/docs/standard/getting-started/migration/#section-migrating-from-v2-to-v3
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: 3.0.0
- Device: Pixel 4x/Pinebook Pro/MBPro
- Browser: firefox
- OS: OSX/Android/Manjaro
- Provided sample code: No
- Provided link: No
jeffpfoster commented 4 years ago
Further testing: I took the sample https://mdbootstrap.com/snippets/standard/mdb-lab/2820970 to take someone else's code and test it. I copied the html and then took the 3.1.0 pro version of the mdb css and js. I then shrank the browser window down and menu button came up but it was unable to be expanded.
You can test this at https://jeffpfoster.com/snippet/index.html