materializecssモバイルナビが無効にされています

Question

私のウェブページにはMaterializeCSSのナビゲーションバーが使用されています。 nav要素を追加して応答モードに切り替えると、折りたたみボタンが表示されます。それをクリックすると、サイド・ナビゲーションとリンクが表示されます。ただし、ボタンは無効になっています（サイドナビゲーションの上にオーバーレイが表示されているようです）。いずれかのリンクをクリックすると、サイドナビゲーションが消えます。

これは私のナビゲーションバーコードです：

<div class="navbar-fixed scrollspy" id="main"> 
     <nav> 
      <div class="container nav-wrapper"> 
       <a href="#!" class="brand-logo center">SRS Constructions</a> 
       <a href="#" data-activates="mobile-menu" class="button-collapse"><i class="fa fa-bars"></i></a> 
       <ul class="left hide-on-med-and-down"> 
        <li class="active"><a href="#main">Home <span class="sr-only">(current)</span></a></li> 
        <li><a href="#about">About</a></li> 
        <li><a href="#services">Services</a></li> 
       </ul> 
       <ul class="right hide-on-med-and-down"> 
        <li><a href="#">Our Projects</a></li> 
        <li><a href="#">Why Us</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
       <ul class="side-nav" id="mobile-menu"> 
        <li><a href="#main">Home</a></li> 
        <li><a href="#about">About</a></li> 
        <li><a href="#services">Services</a></li> 
        <li><a href="#">Our Projects</a></li> 
        <li><a href="#">Why Us</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </div> 
     </nav> 
</div> 

これは私が3つのバーをクリックしたとき、それがどのように見えるかです：

私はにアップロードフルページを持っていますギブスhere。

Answer 1

あなたのnavbar divの外に＃mobile-menuを配置してみてください。

Answer 2

ソリューション：公式マテリアライズのドキュメントは、モバイルメニューは、ナビゲーションバーのdivの内側にあることを示しているので、.navbar-固定

<div class="navbar-fixed"> 
    <nav> 
     <div class="nav-wrapper"> <a href="#!" class="brand-logo">Logo</a> 
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a> 
      <ul class="right hide-on-med-and-down"> 
       <li><a href="sass.html">Sass</a></li> 
       <li><a href="badges.html">Components</a></li> 
       <li><a href="collapsible.html">Javascript</a></li> 
       <li><a href="mobile.html">Mobile</a></li> 
      </ul> 
     </div> 
    </nav> 
</div> 

<ul class="side-nav" id="mobile-demo"> 
    <li><a href="sass.html">Sass</a></li> 
    <li><a href="badges.html">Components</a></li> 
    <li><a href="collapsible.html">Javascript</a></li> 
    <li><a href="mobile.html">Mobile</a></li> 
</ul>