Logo Header Resizing

Add a class to your image - class="logo":

<img src="pictures/logo.png" width="103" height="20" class="logo" />

Add the below css to your css styles:

.logo {

-webkit-transition: all 0.3s ease-in;

-webkit-transform: scale(1.0);

-ms-transition: all 0.3s ease-in;

-ms-transform: scale(1.0);

-moz-transition: all 0.3s ease-in;

-moz-transform: scale(1.0);

transition: all 0.3s ease-in;

transform: scale(1.0);

}

.logo_resize {

-webkit-transform: scale(0.8);

-ms-transform: scale(0.8);

-moz-transform: scale(0.8);

transform: scale(0.8);

}

Add $('.logo').addClass('logo_resize');    &     $('.logo').removeClass('logo_resize');   to the function as shown below:

$(window).scroll(function() {

  if ($(document).scrollTop() > 50) {

    $('nav').addClass('shrink');

$('.logo').addClass('logo_resize');

  } else {

    $('nav').removeClass('shrink');

$('.logo').removeClass('logo_resize');

  }

});