Materialize: #sidenav-overlay showes up above .side-nav

[ezkay]

Hi,

the #sidenav-overlay showes up above the slide out .side-nav (see screenshot).

I'm wondering how to fix this? Is it the right way to just set the following css?

#sidenav-overlay {
    left: 240px;
}

[diegogurgel]

Hi @ezkay same occurs here so i just called open and close programatticaly:
$('.button-collapse').sideNav('show');
$('.button-collapse').sideNav('hide');

[Uzzije]

@ezkay overide side-overlay z index in your own css file

sidenav-overlay {

z-index: 1;

}
make sure that your css file comes after materialize own css file

[vpezeshkian]

That's not the best approach, modifying css is not encouraged, especially when you have other widgets on the screen such as FAB buttons.

Anyway the issue persisted even though the z-index on layover is 998 and the menu 999

[441N143G]

z-index: 996 works perfectly

[petebytes]

Thanks for both suggestions! The following worked for me.

sidenav-overlay {

z-index: 996;

}

[xylude]

I had the same problem, and after digging around I realized that if you put the .side-nav inside of the .navbar-fixed component the z-index for .navbar-fixed will override the one set on .side-nav. I fixed this without messing about with the css by moving the .side-nav component out of the .navbar-fixed one.

The lesson learned here is even if you aren't using the .navbar-fixed class, it might be some other parent causing your z-index to be wrong on the .side-nav.

Hope this helps!

[DBPreston]

@xylude's fix worked for me - far better than overriding the z-index in CSS (which didn't work in 0.98.0 anyway). This should maybe referred to in docs.

[tomscholz]

I would never recommend to change the z-index. When using the fixed navbar you have to move the mobile sidenav outside the nav sector. Anyway. This is a duplicate to https://github.com/Dogfalo/materialize/issues/3844. Please close or create a PR that fixes this issue. Thanks :)

[tomscholz]

These issues are all duplicates:
https://github.com/Dogfalo/materialize/issues/1664
https://github.com/Dogfalo/materialize/issues/3918
https://github.com/Dogfalo/materialize/issues/4046
https://github.com/Dogfalo/materialize/issues/4231
https://github.com/Dogfalo/materialize/issues/437
https://github.com/Dogfalo/materialize/issues/4318
https://github.com/Dogfalo/materialize/issues/3982
https://github.com/Dogfalo/materialize/issues/2879
https://github.com/Dogfalo/materialize/issues/4187

For the future discussion, please use this issue instead.
https://github.com/Dogfalo/materialize/issues/3844

[cedric858]

@xylude's fix worked for me too, thx a lot! So shouldn't they update their materializer's documentation and mention this case of figure when people use the navbar or sidenav component?