title: Customized Bootstrap navbar with centered logo
body: <p>I am trying to recreate this <a href="https://rarebirdsbookclub.com/" rel="nofollow noreferrer">fancy nav</a> with a centered logo and the shadow effect. </p>
  
  <p>I have managed to get the JS effect to work where the image shrinks on scroll. </p>
  
  <p>I have got this far but how to I position the image so it is centered over the nav? </p>
  
  <p>Also how do I create the shadow under the navbar and the image?  </p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;nav class="navbar navbar-expand-lg sticky-top navbar-light bg-light 
      flex-column"&gt;
    &lt;div class="container"&gt;
  &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
  &lt;div class="navbar-collapse collapse" id="navbarNav"&gt;
    &lt;ul class="navbar-nav nav-fill w-100"&gt;
      &lt;li class="nav-item active align-self-center"&gt;
        &lt;a class="nav-link" href="#"&gt;About&lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item align-self-center"&gt;
        &lt;a class="nav-link" href="#"&gt;Books&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="navbar-brand mx-auto" href="index.html"&gt; &lt;img src="https://placeimg.com/640/480/any" class="largeLogo" id="Logo" alt="Star Books"&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item align-self-center"&gt;
        &lt;a class="nav-link" href="#"&gt;Book Club&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item align-self-center"&gt;
        &lt;a class="nav-link" href="#"&gt;Contact&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS </p>
  
  <pre><code>#Logo {
    position: absolute;
    transition: all 0.5s;
    border-radius: 50%;
  }
  
   .largeLogo {
     width: 200px;
  }
  
   .smallLogo {
     width: 100px;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>window.onscroll = function() {
    growShrinkLogo()
  };
  
  var Logo = document.getElementById("Logo");
  var endOfDocumentTop = 150;
  var size = 0;
  
  function growShrinkLogo() {
    var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
  
    if (size == 0 &amp;&amp; scroll &gt; endOfDocumentTop) {
      Logo.className = 'smallLogo';
      size = 1;
    } else if (size == 1 &amp;&amp; scroll &lt;= endOfDocumentTop) {
      Logo.className = 'largeLogo';
      size = 0;
    }
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/v2sb169w/" rel="nofollow noreferrer">JSFiddle</a></p>