マテリアライズCSS - Sidenavオーバーレイはすべてのページをカバーします

Question

マテリアライズCSSを使用しています。中および小画面でナビゲーションバーをsidenavにしたいと思います。私はちょうどdocumentationのようにしました。問題は、私は、メニューボタンをクリックすると、sidenavが開かれていることですが、それは私が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> 

私は（sidenavオーバーレイも997である場合）ナビゲーションバーに固定されたが、997のz-indexを持っていることに気づき、と私はそれが問題を引き起こすかもしれないと思います。しかし、サイドナビゲータは位置が固定されており、z-indexは999です。位置が固定であっても、親に依存していますか？

編集：sidenav-overlayのleftプロパティを変更して解決できますが、手動で設定する必要はありません。私は別の解決策を探しています。

Answer 1

私は同じ問題を抱えていました。 <ul class="side-nav">が<div class="navbar-fixed">とに含まれているため、オーバーレイのZインデックスは同じです。navbar-fixedを使用すると、常にこの問題が発生します。

さまざまな要素のz-インデックスを混乱させることができますが、サイドナビゲーションがアクティブになったときには理想的ではない表示になります。

この問題を回避するには、<div class="navbar-fixed">にに<ul class="side-nav">を並列に配置して問題を解決しました。このように：

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