マテリアライズ、静的ナビ内のモバイルメニューはモーダルの背後にありますか？

Question

私は新しいhtmlファイルでこれを貼り付ける場合は、期待するように、それが見えます：

<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> 
     <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> 
    </div> 
    </nav> 

しかしhereを指示されたとおり、私は、<div class="navbar-fixed">とそれを囲む場合は、メニューは灰色です。

<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> 
     <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> 
    </div> 
</nav> 
</div> 

Answer 1

ドキュメントhereへの修正のためのプル要求があるように見えます。

.side-nav要素は、要素のの外側に移動します。

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

あなたはまた、あなたのCSSコードにこのスニペットを追加することができます

Answer 2

：

.nav-wrapper { 
    position: fixed; 
    top: 0; 
}