title: Shrink header as the user scrolls down
body: <p>I'm a newbee to bootstrap/web designing. Can anyone help me how to shrink a header and the logo in the header as the user scrolls down???</p>
  
  <p>Exactly like this <a href="https://www.metlife.com/products/index.html" rel="nofollow">https://www.metlife.com/products/index.html</a></p>
  
  <p>I have a header component.</p>
  
  <p>This is how my header looks like. (JSX)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div className="header"&gt;
    &lt;Row id="SalesHeader"&gt;
      &lt;Col xs={12}&gt;
        &lt;a id="HomeLink"&gt;
          &lt;Image src={require( './icon_home.png')} alt="home" /&gt;Home
        &lt;/a&gt;
        &lt;div id="ContactLink" className="hidden-xs"&gt;
          {contactArea}
        &lt;/div&gt;
      &lt;/Col&gt;
    &lt;/Row&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you!!</p>