title: materializecss mobile navbar is disabled
body: <p>I'm using MaterializeCSS's navbar for my webpage. After adding the nav element and switching to responsive mode, I can find the collapsed button appearing. On clicking it, I am shown the side nav with the links. However the buttons are disabled (there seems to be an overlay on top of the side nav). On clicking any of the links, the side nav disappears. </p>
  
  <p><strong>This is my navbar code:</strong></p>
  
  <pre><code>&lt;div class="navbar-fixed scrollspy" id="main"&gt;
          &lt;nav&gt;
              &lt;div class="container nav-wrapper"&gt;
                  &lt;a href="#!" class="brand-logo center"&gt;SRS Constructions&lt;/a&gt;
                  &lt;a href="#" data-activates="mobile-menu" class="button-collapse"&gt;&lt;i class="fa fa-bars"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;ul class="left hide-on-med-and-down"&gt;
                      &lt;li class="active"&gt;&lt;a href="#main"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#services"&gt;Services&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;ul class="right hide-on-med-and-down"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Our Projects&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Why Us&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;ul class="side-nav" id="mobile-menu"&gt;
                      &lt;li&gt;&lt;a href="#main"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#services"&gt;Services&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Our Projects&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Why Us&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p><strong>This is how it looks when I click on the 3 bars :</strong></p>
  
  <p><a href="https://i.stack.imgur.com/eprMX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eprMX.png" alt="enter image description here"></a></p>
  
  <p>I have the full page uploaded to Github <a href="https://github.com/V1cHu/srs/blob/master/index.html" rel="nofollow noreferrer">here</a>.</p>