Materialize: SideNav overlay cover .side-nav when in .navbar-fixed

[MacGyer]

Description

When you render the source for your side nav (.side-nav) inside the "normal" navbar, especially a fixed navbar (.navbar-fixed), the #sidenav-overlay covers the whole page including the actual sidenav. This makes the side nav not usable.

The issue occurs, because the .side-nav is embedded in .navbar-fixed. So the .navbar-fixed and #sidebar-overlay have the same z-index (997).

Any chance to fix the issue? Or is it required to place the sidebar outside of (any) .navbar?

Repro Steps

View the pen below.

Screenshots / Codepen

http://codepen.io/anon/pen/egOdPK

[MacGyer]

Update: seems to work on 0.97.7. Just set the codepen JS and CSS file to 0.97.7 to confirm.

[TheColorRed]

I am seeing this issue on the latest version as well.

[shmshd]

@MacGyer You have already given almost fix.
Just add this to your custom styles.css file :
.navbar-fixed { z-index: 9999; }
I check this in your given Codepen link and this worked fine.

[MacGyer]

@shmshd12 I just checked the pen. It is configured for 0.97.8 and your suggestion is integrated.
Does not work.

[shmshd]

@MacGyer check this out : http://codepen.io/anon/pen/GrRrVP
This codepen is a copy paste of your given Codepen with addition of .navbar-fixed { z-index: 9999; }.

Check if your styles.css is below materialize.min.css. If it is at topstyles.css will not overwrite materialize.min.css file.

[MacGyer]

@shmshd12 sorry, my bad. Your solution indeed works. (had the CSS comment not closed).

Thanks for providing. Nevertheless I think, this issue should be solved by the Materialize CSS itself.

[c0u1d]

I got the same issue with my github pages,this should be solved by materialize itself not overwrite it!

[shmshd]

@c0u1d Above given fix is a temporary one. Yes, this issue will not be closed until Materialize fix the issue.

[risendev]

If you adjust the z-index in .sidenav-overlay on /sass/components/_sideNav.scss line 208 from 997 to 996 then it will permanently resolve this issue.

[TheColorRed]

I figured out the issue. It is because you have your sidebar nested within your .navbar-fixed. Moving the ul outside of the .navbar-fixed fixes the issue.

Here is the fixed pen: http://codepen.io/anon/pen/NdYjMy

[contributorpw]

As said @risendev I'm using

   .navbar-fixed{
      z-index:998;
    }

It works fine as an exception.

[tomscholz]

Duplicate https://github.com/Dogfalo/materialize/issues/3844

[contributorpw]

@tomscholz It doesn't work. The menu doesn't hide after a click. My solution works as expected.

[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

[marcodiversi]

it took me 3 hours but i fixed it putting the slide-out

outside on top and wrapping the whole thing at the end with a simple
and after the

i opened the slide-out thing