Topic: How do I have a collapsible navbar with dropdowns on large screens, but accordions on mobile? Not a sidenav either.
                                            
                                            owlsandmoons
                                                                        asked 3 years ago                                
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 3 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 3 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 3 years ago
That's a good suggestion. I'll look into that. Thank you.