title: Side menu button doesn't come on the NavBar in Materialize.
body: <p>I am using the materialize.min.css and materialize.min.js and no other stylesheets.</p>
  
  <p>I made a simple webpage. The code: </p>
  
  <pre><code>{% load static %}
  &lt;html&gt;
  &lt;head&gt;
  &lt;link type="text/css" rel="stylesheet" href="{% static 'css/materialize.min.css' %}"&gt;
  &lt;link type="text/javascript" href="{% static 'js/jquery-1.11.3.min.js' %}"&gt;
  &lt;title&gt;
  TITLE
  &lt;/title&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/&gt;
  &lt;/head&gt;
  &lt;body data-marker-image="{% static 'img/truck3.png' %}"&gt;
  
  &lt;div&gt;
      &lt;nav class="light-green lighten-3"&gt;
          &lt;div class="nav-wrapper"&gt;
              &lt;a class="brand-logo center" href="SITE" target="_blank"&gt;
                  LOGO&lt;!-- &lt;img src="{% static 'img/LOGO1.png' %}" style="height: 100%; width: 35%;"/&gt; --&gt;
              &lt;/a&gt;            
          &lt;/div&gt;
      &lt;/nav&gt;
      &lt;div class="side-menu-bar"&gt;
          &lt;ul id="slide-out" class="side-nav full"&gt;
              &lt;li&gt;&lt;a href="#!"&gt;About Us&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#!"&gt;Support&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;a href="#" data-activates="slide-out" class="button-collapse"&gt;
              &lt;i class="large mdi-navigation-menu white"&gt;&lt;/i&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;main&gt;
      &lt;div id="map-canvas" style="width: 100%; height: 100%;"&gt;
          &lt;div id="onmap-div"&gt;
              &lt;div id="onmap-price"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/main&gt;
  
  &lt;footer&gt;
      &lt;div class="page-footer light-green lighten-3"&gt;
          &lt;div class="container"&gt;             
              Footer Note             
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="footer-copyright light-green lighten-2"&gt;
          &lt;div class="container"&gt;
              Copyright
          &lt;/div&gt;          
      &lt;/div&gt;
  &lt;/footer&gt;
  
  
  
  &lt;script type="text/javascript" src="{% static 'js/jquery-1.11.3.min.js' %}"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="{% static 'js/materialize.min.js' %}"&gt;&lt;/script&gt;
  &lt;script&gt;$(".button-collapse").sideNav();&lt;/script&gt;
  &lt;script type="text/javascript"&gt;var shipment_id = {{shipment_id}};&lt;/script&gt;
  &lt;script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&amp;libraries=places&amp;language=en-US"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="{% static 'js/socket.io.js' %}"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="{% static 'js/map.js' %}"&gt;&lt;/script&gt;
  &lt;script&gt;google.maps.event.addDomListener(window, 'load', initialize());&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The webpage made was like this: <a href="http://pasteboard.co/1hz4vuHF.png" rel="nofollow">http://pasteboard.co/1hz4vuHF.png</a></p>
  
  <p>As you can see from the image that the blue button is not coming on top of the NavBar.</p>
  
  <p>How to fix it?</p>
  
  <p>PS - Also How to change its color?</p>