materialize css: Always show side-nav even on mobi

Question

I am using materialize css. I'm using side nav and want to set visible even on mobile. I'm using following code for this but its not working.

@media only screen and (max-width: 992px) {
    .side-nav{
        visibility: visible;
        opacity: 100;
    }
}

Its keep on hiding on small screen.

Answer 1

Materialize uses CSS transformations to show/hide the side nav, so altering the visibility or opacity will not help you here. A very quick solution is just to fix the translateX transformation at 0. This should make your nav visible at all times.

.side-nav {
    transform: translateX(0%) !important;
}