title: Materialize CSS transparent navbar
body: <p>I have trouble making my navbar transparent. Instead what shows is a white background. I have even tried editing the materialize css source files and adding the class 'transparent' and nothing changes. Does anyone have a work around for this?</p>
  
  <pre><code>&lt;div class="navbar-fixed transparent"&gt;
  &lt;nav class="transparent"&gt;
      &lt;div class="nav-wrapper transparent"&gt;
          &lt;a href="#" class="brand-logo center"&gt;KAYWA&lt;/a&gt;
          &lt;a href="#" data-activates="mobile-demo" class="button-collapse" id="btncollapse"&gt;
              &amp;#9776;
          &lt;/a&gt;
          &lt;ul class="left hide-on-med-and-down transparent"&gt;
              &lt;li&gt;&lt;a href="#" class="link"&gt;HOME&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="link"&gt;ABOUT US&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="link"&gt;SOCIAL MEDIA&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="link"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="right hide-on-med-and-down transparent"&gt;
              &lt;li&gt;&lt;a href="#" class="link"&gt;&lt;i class="fa fa-instagram fa-2x"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="link"&gt;&lt;i class="fa fa-facebook fa-2x"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="link"&gt;&lt;i class="fa fa-twitter fa-2x"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="link"&gt;&lt;i class="fa fa-google-plus fa-2x"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="side-nav" id="mobile-demo"&gt;
              &lt;li&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;ABOUT US&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;SOCIAL MEDIA&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-instagram fa-2x"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-facebook fa-2x"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-twitter fa-2x"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-google-plus fa-2x"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p></p>