Topic: Bootstrap 5.3: Navbar dropdown submenu not responsive
Good morning community, I'm sorry to bother you, I thought maybe you could help me. I'm new to Bootstrap, I'm developing a small website locally and running Bootstrap 5.3 for the first time, I've been looking for days how to make a dropdown submenu with no luck. Finally I found this link:
[https://mdbootstrap.com/docs/standard/extended/dropdown-multilevel/#][1]
The "Navbar dropdown" section shows exactly what I need. I followed every step to the letter: using Chrome on my PC everything works fine, but in the mobile version, when I tap on the submenu the entire dropdown menu closes, that is, the submenu is never shown. I have no idea why. Any thoughts?
That's the only tutorial that worked for Bootstrap 5.3 for me, even though it has that drawback. Sadly, the official Bootstrap 5.3 documentation doesn't show how to do exactly that.
Expected behavior The dropdown menu and submenu should be shown both in normal and responsive view
Actual behavior The dropdown menu closes in mobile view.
Resources (screenshots, code snippets etc.) I already attached the link with the code above.
Thanks in advance for any suggestion!
Hello, Extended docs aren't a part of the core documentation. Extended docs are meant to show the components mixed in very specific configurations & customized with non-standard options.
If you want this to work on mobile to you would need to add some custom JS that prevents 'parent' dropdown from closing if tapped option is toggler itself.
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: General Bootstrap questions
- MDB Version: -
- Device: Mobile
- Browser: Chrome
- OS: Windows 11 Pro
- Provided sample code: No
- Provided link: No