Topic: SideNav Full Width Responsive Mobile
Expected behavior Full width SideNav on mobile
Actual behavior Does not go full width
Resources (screenshots, code snippets etc.)
I’ve gone through all the docs and forum posts - most are old and not relevant to MDB 5 without jQuery.
I’ve tried:
CSS media queries to no avail.
Apple meta tags and different viewport settings
JavaScript examples from the SideNav docs without success.
I did find something similar (link below) but isn’t the SideNav. Can the SideNav element achieve similar results with full screen?
Sidebar element found via google but can’t find linked in current documentation. Is this in the official MDB 5 docs as a SideNav alternative?
https://mdbootstrap.com/docs/standard/extended/sidebar/
Thanks
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 3.8.0
- Device: Apple iPhone
- Browser: Chrome and Firefox
- OS: Win 10
- Provided sample code: No
- Provided link: Yes
Michał Duszak staff commented 2 years ago
Hello, Please tell me, is this the effect you was expecting? You can manipulate width on any resolution, and also center items in your sidenav. Please see this snippet: (I've set it's width to 90%, not to 100% just because I didnt define any button that will close the sidenav) https://mdbootstrap.com/snippets/standard/m-duszak/3140255#css-tab-view
@media (max-width: 1200px) { .sidenav { width: 90% !important; }
.sidenav-item { width: 100%; } .sidenav-link { justify-content: center; } }