Topic: How do I have a collapsible navbar with dropdowns on large screens, but accordions on mobile? Not a sidenav either.

owlsandmoons free asked 1 year ago


Expected behavior

Actual behavior

Resources (screenshots, code snippets etc.)


owlsandmoons free commented 1 year 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.


Mateusz Lazaru staff commented 1 year ago

You could try to create both, dropdowns and accordions and toggle their visibility by using classes of d-block d-sm-none to hide dropdowns and d-none d-sm-block to 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 free commented 1 year ago

That's a good suggestion. I'll look into that. Thank you.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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