Resize Navbar on scroll

[admin]

I am trying to resize my navigation bar smaller when the user scrolls.
This is my url <a href="http://www.agl.run-time.co.za" rel="nofollow">website</a>

I have this function inserted : (using a javascript / css / plugin in wordpress)

    $(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('nav').addClass('shrink');
  } else {
    $('nav').removeClass('shrink');
  }
});

CSS:

  nav.art-nav{
  background-color:#ccc;
   -webkit-transition: all 0.4s ease;
   transition: all 0.4s ease;
}
nav.art-nav.shrink {
  min-height: 35px;
}

I have tried all I can think of to edit the example found at <a href="http://jsfiddle.net/Filo/m7yww8oa/" rel="nofollow">js fiddle</a>
to suite my site, but cannot get it to resize, any advice would be appreciated please,

Thank you