title: Bootstrap 3 navigation bar resizes and changes logo when scroll
body: <p>I want to be gain the effect of changing the logo to a more simpler version and have navigation fixed on top when I scroll down.</p>
  
  <p>I've tried with some of the solutions I've found on stack overflow but I didn't manage to get the effect that I want.</p>
  
  <p>I want to get this effect like on this website <a href="http://dootrix.com/" rel="nofollow">http://dootrix.com/</a></p>
  
  <p>This is my code (I'm using WordPress and Bootstrap3):</p>
  
  <pre><code>&lt;header&gt;
      &lt;div class="container-fluid full-width-menu navbar-fixed-top"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
                  &lt;div class="logo img-responsive col-md-4"&gt;
                      &lt;a class="logo-link" href="&lt;?php echo get_bloginfo('url' ); ?&gt;"&gt;&lt;img src="&lt;?php bloginfo('stylesheet_directory') ?&gt;/images/logo.svg" /&gt;&lt;/a&gt;
                  &lt;/div&gt; &lt;!-- end logo --&gt;    
                  &lt;div class=""&gt; &lt;!-- Menu --&gt;
                      &lt;nav class="main-menu navbar-inverse col-md-offset-2 col-md-6" role="banner"&gt;
                          &lt;div class="navbar-header"&gt;
                            &lt;button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"&gt;
                              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                            &lt;/button&gt;
                          &lt;/div&gt;
  
                              &lt;?php
                                  wp_nav_menu( array(
                                      'menu'              =&gt; 'primary',
                                      'theme_location'    =&gt; 'primary',
                                      'depth'             =&gt; 1,
                                      'container'         =&gt; 'nav',
                                      'container_class'   =&gt; 'navbar-collapse bs-navbar-collapse collapse',
                                      'container_id'      =&gt; 'bs-example-navbar-collapse-1',
                                      'menu_class'        =&gt; 'nav navbar-nav no-gutter cl-effect-4',
                                      'fallback_cb'       =&gt; 'wp_bootstrap_navwalker::fallback',
                                      'walker'            =&gt; new wp_bootstrap_navwalker())
                                  );
                              ?&gt;
                      &lt;/nav&gt;      
                  &lt;/div&gt; &lt;!-- End menu --&gt;
          &lt;/div&gt; &lt;!-- end row --&gt;
      &lt;/div&gt; &lt;!-- end container --&gt;
      &lt;/div&gt; &lt;!-- end container-fluid --&gt;
      &lt;/div&gt;
      &lt;/header&gt;
  </code></pre>
  
  <p>I've only got that my navigation is fixed on top, but I want to be animated and load the smaller version of the logo.</p>
  
  <p>Any suggestions?</p>