Logo resize on sticky header scroll

I'm designing a site with the Alpha theme, which has a beautiful sticky header that resizes as the user scrolls through. However, the theme was designed for the header to use a main nav block (on the right side) and the site name as text on the left; I want to use an image logo instead.

The problem is that I cannot get the logo to stay on the header and resize. I've tried CSS and JQuery code (from a variety of tutorials and sources) but nothing is working.

Can anyone find something I'm missing?

#ff-header-wrap {
   z-index: 2;
       position: relative;
       top: 0;
       left: 0;
       width: 100%;
       background-color: #ffffff;
       -webkit-transition: height 0.3s;
       -moz-transition: height 0.3s;
       -ms-transition: height 0.3s;
       -o-transition: height 0.3s;
       transition: height 0.3s;
.logo {  
float: left; height: auto;
-webkit-transition: all 0.3s;

View Replies: