Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

#sidenav-overlay showes up above .side-nav

See original GitHub issue

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;
}

bildschirmfoto 2016-03-05 um 16 09 08

Issue Analytics

State:
Created 8 years ago
Comments:10 (2 by maintainers)

Top GitHub Comments

34reactions

xyludecommented, Jan 10, 2017

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!

5reactions

Uzzijecommented, Aug 12, 2016

@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