Materialise CSS - nakładka Sidenav pokrywa całą stronę

Question

Używam Materialise css i chcę zmienić pasek nawigacji na sidenav na środkowych i małych ekranach. Zrobiłem to tak jak w documentation. Problem polega na tym, że po kliknięciu przycisku menu, sidenav jest otwarty, ale to jest jak na obrazku poniżej

ja nie jestem w stanie kliknij łącza w sidenav od czasu sidenav-nakładki obejmuje całą stronę nawet sam sidenav. Zamyka się, gdy próbuję kliknąć łącze. Wszelkie sugestie, jak to rozwiązać?

HTML:

 <div class="navbar-fixed"> 
      <nav class=""> 
       <div class="nav-wrapper red lighten-1"> 
        <div class="container-fluid"> 
         <a href="#!" class="brand-logo"> 
          <img src="img/logo.png"> 
         </a> 
         <a href="#" data-activates="mobile-sidenav" class="button-collapse"><i class="material-icons">menu</i></a> 
         <ul class="right hide-on-med-and-down"> 
          <li><a href="#">How It Works?</a></li> 
          <li><a href="#">Technology</a></li> 
          <li><a href="#">Pricing</a></li> 
          <li><a href="#">More</a></li> 
          <li><button class="waves-effect waves-light btn deep-orange">Request Demo</button></li> 
         </ul> 
         <ul class="side-nav" id="mobile-sidenav"> 
          <li><a href="#">How It Works?</a></li> 
          <li><a href="#">Technology</a></li> 
          <li><a href="#">Pricing</a></li> 
          <li><a href="#">More</a></li> 
          <li><button class="waves-effect waves-light btn deep-orange">Request Demo</button></li> 
         </ul> 
        </div> 
       </div> 
      </nav> 
     </div> 

zdałem sobie sprawę, że navbar utrwalonych mieć z-index 997 (gdzie sidenav-nakładka jest również 997) i myślę, że może to spowodować problemy. Jednak boczna nawigacja ma ustalone położenie i z-index z 999. Czy jest zależna od swojego rodzica, nawet jeśli ma ustaloną pozycję?

Edytuj: Mogę go rozwiązać, zmieniając właściwość left nakładki sidenav, ale nie chcę jej ustawiać ręcznie. Szukam innego rozwiązania.

Answer 1

Miałem ten sam problem. Ponieważ <ul class="side-nav"> jest zawarty w <div class="navbar-fixed">i nakładka ma taki sam indeks Z, zawsze będziesz mieć ten problem podczas korzystania z navbar-fixed.

Możesz poradzić sobie z indeksami z różnych elementów, ale każdy z nich powoduje wyświetlanie mniej niż idealnych wyświetlanych po włączeniu nawigacji bocznej.

Aby obejść ten problem, wstawiam <ul class="side-nav"> równolegle w strukturę dokumentu do <div class="navbar-fixed"> i problem sam się rozwiązuje. W ten sposób:

<ul class="side-nav" id="mobile-sidenav"> 
    <li><a href="#">How It Works?</a></li> 
    <li><a href="#">Technology</a></li> 
    <li><a href="#">Pricing</a></li> 
    <li><a href="#">More</a></li> 
    <li><button class="waves-effect waves-light btn deep-orange">Request Demo</button></li> 
</ul> 
<div class="navbar-fixed"> 
    <nav class=""> 
    <div class="nav-wrapper red lighten-1"> 
     <div class="container-fluid"> 
     <a href="#!" class="brand-logo"> 
      <img src="img/logo.png"> 
     </a> 
     <a href="#" data-activates="mobile-sidenav" class="button-collapse"><i class="material-icons">menu</i></a> 
     <ul class="right hide-on-med-and-down"> 
      <li><a href="#">How It Works?</a></li> 
      <li><a href="#">Technology</a></li> 
      <li><a href="#">Pricing</a></li> 
      <li><a href="#">More</a></li> 
      <li><button class="waves-effect waves-light btn deep-orange">Request Demo</button></li> 
     </ul> 
     </div> 
    </div> 
    </nav> 
</div>