How To Overflow Logo BOTH Top And Bottom in Header?

I have a tall logo that I want to behave as follows:

1) Spill out of the header on the bottom without stretching the whole header (overlap the content)
2) Start logo from the very top of the header overlapping the “Extra Elements” bar, as opposed to starting below the “Extra Elements” bar in header

I was able to accomplish #1 by finding the code here, but #2 doesn’t work. Here’s my code:

.logo a {
height: 230px;
margin-top: -20px;
}

 .logo, .logo a, .logo img {
overflow: visible;
}

When I added “margin-top: -20px” it moved the logo to top, but the problem is that logo is covered on TOP by the “extra elements” header bar. How do I fix that?

Thanks in advance for your help!