Проблема с вертикальным выравниванием

Я изо всех сил пытаюсь получить свой логотип и пункты меню, выровненные по вертикали в моем заголовке. Не могли бы вы помочь мне? (обратите внимание, что высота заголовка изменяется, когда пользователи прокручиваются вниз на 100 пикселей, и я хотел бы сохранить логотип и меню по вертикали в соответствии с высотой заголовка). Большое спасибо

http://jsfiddle.net/pPx62/

<div class="header big-height">
<div class="logo">Logo</div>

<ul class="drop_menu">
<li><a href='#'>Link 1</a>
    <ul>
    <li><a href='#'>Sub Link 1</a></li>
    <li><a href='#'>Sub Link 2</a></li>
    </ul>
</li>
<li><a href='#'>Link 2</a>
    <ul>
    <li><a href='#'>Sub Link 1</a></li>
    <li><a href='#'>Sub Link 2</a></li>
    <li><a href='#'>Sub Link 3</a></li>
    <li><a href='#'>Sub Link 4</a></li>
    </ul>
</li>
<li><a href='#'>Link 3</a>
    <ul>
    <li><a href='#'>Sub Link 1</a></li>
    <li><a href='#'>Sub Link 2</a></li>
    <li><a href='#'>Sub Link 3</a></li>
    <li><a href='#'>Sub Link 4</a></li>
    </ul>
</li>
</ul>
        </div>
        <!-- end header-->
<div class="spacer"></div>
<div class="block"></div>
<div class="block"></div>


.big-height {
    height: 120px;
      -webkit-transition-duration: 400ms;
        -webkit-transition-function: linear;
}

.short-height {
    height: 80px;
      -webkit-transition-duration: 400ms;
        -webkit-transition-function: linear;
}




.header {
    width: 100%;
    background: #fff;
    color: #124191;
    font-weight: 300;
    font-size: 28px;
    display: table;
        position: fixed;
        z-index: 999999;
        opacity: 0.7;
    background: aqua;


}

.logo {
display: inline-block;
vertical-align: middle;
left:0;
color: #333;
font-size: 30px;
font-weight: 800;
letter-spacing: -1px;
margin-left: 60px;
background: red;
}

 .drop_menu {
    padding:0;
    margin:0;
    list-style-type:none;
    float: right;
    vertical-align: middle;
        display: table;

}

.drop_menu li { 
    display: table-cell;
    vertical-align: middle;
    float:left;
}

.drop_menu li a {
    padding:9px 20px;
    display:block;
    color:#666;
    text-decoration:none;
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;



}

/* Submenu */
.drop_menu ul {
    position:absolute;
    left:-9999px;
    top:-9999px;
    list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#5FD367; }
.drop_menu li:hover ul {
    left:0px;
    top:30px;
    background:#5FD367;
    padding:0px;
}

.drop_menu li:hover ul li a {
    padding:5px;
    display:block;
    width:168px;
    text-indent:15px;
    background-color:#5FD367;
}
.drop_menu li:hover ul li a:hover { background:#005555; }

.block {
    height: 800px;
    background: green;
    width:100%;
    margin-top: 5px;

}

JS

$(function() {
    var header = $(".header");
    $(window).scroll(function() {   
        var scroll = $(window).scrollTop();

        if (scroll >= 100) {
            header.removeClass('big-height').addClass("short-height");

        } else {
            header.removeClass("short-height").addClass('big-height');

        }
    });
});


$(document).ready(function() {
var headerHeight = $(".header").height();
$(".spacer").css({"height": headerHeight+"px"});
});