materializecss移動導航欄被禁用

我在我的網頁上使用MaterializeCSS的導航欄。添加nav元素並切換到響應模式後，我可以找到出現摺疊按鈕。點擊它後，我會看到帶有鏈接的側面導航欄。然而，按鈕被禁用（似乎有一個覆蓋在側面導航頂部）。點擊任何鏈接時，側面導航消失。materializecss移動導航欄被禁用

這是我的導航欄代碼：

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

我已經上傳到整頁Github here。

來源

2017-05-06 v1shnu

嘗試將您的＃手機菜單放置在導航欄div之外。

來源

2017-06-04 13:58:29

問題之外出現是因爲Materialise的官方文件顯示，移動菜單可以導航欄DIV中。這很混亂。 – MiniGunnR

解決方案：移動sidenav的.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>

來源

2018-01-19 21:23:47 Francisco

materializecss移動導航欄被禁用

回答

相關問題