Modify slim sidenav


Topic: Modify slim sidenav

salmanfazal01 pro asked a year ago

I just came across the slim sidenav and I'm trying to implement it into my project.

I'd like some help on how to change these 2 behaviours with the slim side nav please:

  1. When website loads, the slim sidenav should be minified and not expanded.
  2. The content should cover the entire width. When slim sidenav is expanded, the contents should be responsive and not covered.

salmanfazal01 pro answered a year ago

So this is what I mean. When page loads, the sidenav should not be expanded and all the content to move to the left (responsive when sidenav open or close). There is just too much wasted space on the left at the moment.

enter image description here

Krzysztof Wilk staff answered a year ago


If you want to float icons/content to the left, just read about our horizontal align documentation and try to apply it to the container of your sidenav. If you want bigger content, you must read about our icons, text etc. documentation, I mean if you want bigger icons, you should add fa-2x, fa-3x etc. to their class. I'm not sure, that I understood you right, so If I misunderstood you, just write, I want to help :) and about that first point, maybe try to use $(document).ready() this jquery method? I mean I think you could define state of this sidenav after the page loads.

Andrew Ford pro answered a year ago

If expanded is the default for the Slim Side-Nav. Like the snippet displays,

We want to custom make it so that the website loads the Slim Side-Nav not expanded, exactly like in the screenshot in the documentation -

I'm now just looking for an answer to this as well

Krzysztof Wilk staff answered a year ago

You have to add .slim class to this line (<div> element with id="slide-out")

enter image description here

Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.8.0
  • Device: Chrome
  • Browser: Chrom
  • OS: Chrome
  • Provided sample code: No
  • Provided link: No