Align logo with button (vertically) in top navigation

Hi! On this site https://wea-smartalpaca.squarespace.com/ I'm trying to get the logo at the same height as the button. 

I'm not very familiar with code and already using the following custom CSS, to make the nav bar more narrow.

.header-announcement-bar-wrapper {
    padding: 0vw 2vw!important;
}

(I'm mentioning that because I've searched for the solution first, found two code suggestions that seemed to work for other people, and they're not doing anything for me so I assume the codes are interfering with each other). 

Even before I added that code though, the logo was always displaying higher than the button. It looks fine on mobile (otherwise my solution would have been to add some space at the top of the logo image). 

Can someone help?

There is space under logo, so other code didn't work (I guess so)

Don't remove any code in your current code. Add this to Custom CSS to remove space

.header-nav {
    display: none !important;
}

div.header-announcement-bar-wrapper {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}