SideNav Full Width Responsive Mobile


Topic: SideNav Full Width Responsive Mobile

robertl asked 3 years ago

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:

  1. CSS media queries to no avail.

  2. Apple meta tags and different viewport settings

  3. 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


Michał Duszak staff commented 3 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; } }


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Open

Specification of the issue
  • User: 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