Topic: Sidenav not appearing on button click when gallery is on same page
I'm working through a version of the ecommerce product detail page snippet...
https://mdbootstrap.com/snippets/standard/mdbootstrap/2515476?view=side
I ran into a problem in that the sidenav (Categories menu button) does not show. It works if I remove the vertical gallery in its entirety. I went back to the snippet - see link, and experience the same behaviour.
I don't see any console errors, but the menu just fails to show. If you remove the gallery from the html the menu immediately works correctly.
Any tips on solving this one?
Thanks!
Expected behavior
Actual behavior
Resources (screenshots, code snippets etc.)
https://mdbootstrap.com/snippets/standard/mdbootstrap/2515476?view=side
Hello, thank you for your feedback on this. Seems like lightbox is interfering this process. However, untill we fix it, I will give you a workaround: https://mdbootstrap.com/snippets/standard/m-duszak/3269724
In the JS we have to recreate the listener:
const sidenav = mdb.Sidenav.getInstance(document.querySelector('#sidenav-1'));
document.querySelector('#toggle-sidenav').addEventListener('click', ()=>{
sidenav.show()
})
For this purpose we need to assign an ID id="toggle-sidenav" to our toggler (the Categories icon) in HTML
<a id="toggle-sidenav" class="nav-link" href="#" role="button" data-mdb-toggle="sidenav" data-mdb-target="#sidenav-1"
class="btn shadow-0 p-0 me-3" aria-controls="#sidenav-1" aria-haspopup="true">
<i class="fas fa-bars me-1"></i>
<span>Categories</span>
</a>
That's brilliant. It's usually me breaking stuff so I spent quite a while confirming things first! :D
Thanks for the info, and the workaround - works great. Looking forward to the fix in due course.
Mark
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.9.0
- Device: All
- Browser: Edge
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes