title: Materialize framework: responsive logo in navbar
body: <p>I'm creating a website in materialize framework. I have a problem with logo in navbar. So my logo is very big (6202x3800 px) and I don't have any other version. I want to put this logo in navbar but it always exceeds the frame of <code>nav-wrapper</code>. I tried to add class <code>responsive-img</code> but it didn't work at all.</p>
  
  <p>Here is my code:  </p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>#allcontent {
    background-color: white;
    margin: 2%;
  }
  body {
    background: #d26335;
  }
  nav {
    color: black;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="row" id="allcontent"&gt;
    &lt;div class="navbar-default" id="navbar"&gt;
      &lt;nav class="white"&gt;
        &lt;div class="nav-wrapper"&gt;
          &lt;a href="index.html" class="brand-logo left"&gt;&lt;img class="responsive-img" id="logo" src="&lt;!-- my image --&gt;"/&gt;&lt;/a&gt;
          &lt;ul id="nav-mobile" class="right hide-on-med-and-down"&gt;
            &lt;li&gt;&lt;a href="sass.html"&gt;&lt;i class="material-icons"&gt;search&lt;/i&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;colors&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
  
      &lt;/nav&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>