Materializar CSS: la superposición de Sidenav cubre toda la página

Estoy utilizando Materialise css y quiero girar la barra de navegación hacia la izquierda en pantallas medias y pequeñas. Lo hice como en la documentación . El problema es que cuando hago clic en el botón de menú, se abre sidenav pero es como la imagen de abajo

Sidenav

No puedo hacer clic en los enlaces de la sidenav ya que sidenav-overlay cubre toda la página, incluso la propia sidenav. Se está cerrando cuando trato de hacer clic en un enlace. ¿Alguna sugerencia de cómo resolverlo?

HTML:

 

Me di cuenta de que la barra de navegación fija tiene z-index de 997 (donde sidenav-overlay también es 997), y creo que puede causar el problema. Sin embargo, side-nav tiene posicionamiento fijo e z-index de 999. ¿Depende de su padre incluso si tiene una posición fija?

Editar: puedo resolverlo cambiando la propiedad left de sidenav-overlay, pero no quiero configurarlo manualmente. Estoy buscando otra solución.

Yo tuve el mismo problema. Como

    está dentro de

    y la superposición tiene el mismo índice z, siempre tendrá este problema cuando use navbar-fixed .

    Puede perder el tiempo con los índices z de los diversos elementos, pero cada uno de ellos resulta en pantallas menos que ideales cuando se activa la navegación lateral.

    Para solucionar este problema, puse

      parallel en la estructura del documento en

      y el problema se resolvió solo. Me gusta esto:

         

      Modifique el archivo CSS materializar para cambiar el #sidenav-overlay a

       #sidenav-overlay { position: fixed; top: 0; left: 0; right: 0; height: 120vh; background-color: rgba(0, 0, 0, 0.5); z-index: 996; will-change: opacity; }