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

If expanded is the default for the Slim Side-Nav. Like the snippet displays, https://mdbootstrap.com/snippets/jquery/marta-szymanska/514898?view=standard

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 - https://mdbootstrap.com/docs/jquery/navigation/compositions/#slim

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

Hello!

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.

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.