Topic: Sidenav not appearing on button click when gallery is on same page

mark.mckenna priority asked 2 years ago

I'm working through a version of the ecommerce product detail page snippet...

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?


Expected behavior

Actual behavior

Resources (screenshots, code snippets etc.)

Michał Duszak staff answered 2 years ago

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:

In the JS we have to recreate the listener:

const sidenav = mdb.Sidenav.getInstance(document.querySelector('#sidenav-1'));
document.querySelector('#toggle-sidenav').addEventListener('click', ()=>{

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>

mark.mckenna priority answered 2 years ago

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.


Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • 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