Topic: How do I have a collapsible navbar with dropdowns on large screens, but accordions on mobile? Not a sidenav either.
Expected behavior
Actual behavior
Resources (screenshots, code snippets etc.)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- User: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 6.1.0
- Device: macbook pro/iphone
- Browser: chrome
- OS: monteray
- Provided sample code: No
- Provided link: No
Tags
Related topics
owlsandmoons commented 2 years ago
I greatly appreciate the help. I like the responsiveness of the collapsible navbar and have coded the dropdowns to show on hover (large screens). But I don't like the look of the dropdowns on mobile and would prefer them to be accordions with the text aligned to the left.
mlazaru staff commented 2 years ago
You could try to create both, dropdowns and accordions and toggle their visibility by using classes of
d-block d-sm-noneto hide dropdowns andd-none d-sm-blockto show accordions for small screens. It will make only one of them visible at once, and the shown element will depend on screen size.owlsandmoons commented 2 years ago
That's a good suggestion. I'll look into that. Thank you.