Материализовать CSS - наложение Sidenav охватывает всю страницу

Question

Я использую Materialize css, и я хочу превратить навигационную панель в sidenav на средних и маленьких экранах. Я сделал это, как в documentation. Проблема заключается в том, что при нажатии на кнопку меню, открывается sidenav, но это, как на картинке ниже

Я не могу нажать на ссылки в sidenav с момента sidenav-наложению охватывает всю страницу даже сам сиден. Он закрывается, когда я пытаюсь щелкнуть ссылку. Любые предложения по его решению?

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> 

я понял, что Navbar фиксированный имеет z-index 997 (где sidenav-накладка также 997), и я думаю, что это может привести к проблеме. Однако side-nav имеет фиксированное позиционирование и z-index из 999. Является ли он зависимым от его родителя, даже если он имеет фиксированное положение?

Редактировать: Я могу решить проблему с изменением свойства sidenav-overlay left, но я не хочу его устанавливать вручную. Я ищу другое решение.

Answer 1

У меня была та же проблема. Поскольку <ul class="side-nav"> содержится в пределах <div class="navbar-fixed">и, наложение имеет тот же индекс z, вы всегда будете иметь эту проблему при использовании navbar-fixed.

Вы можете обходиться с z-индексами различных элементов, но каждый из них приводит к менее идеальным отображениям при активации боковой навигации.

Чтобы обойти это, я положил <ul class="side-nav"> в структуру документа, равную <div class="navbar-fixed">, и проблема решена сама. Например:

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