How can I get the height of the header to adapt when resized?

Site URL: https://www.rubysplace.org/

Hi all, I noticed that in mobile view (or when the browser width gets small enough to show the menu icon) , the height of the header still remains the same as when it shows all the links stacked. This results in the appearance of a lot of white space above the hero image. 

How can I get the header height to wrap around the icon when it is downsized? 

I really appreciate any help on this!

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.Main-content {
    padding-top: 0;
}
div#block-yui_3_17_2_1_1583906902259_41269 {
    padding-top: 0 !important;
}
}

16 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.Main-content {
    padding-top: 0;
}
div#block-yui_3_17_2_1_1583906902259_41269 {
    padding-top: 0 !important;
}
}

 

That worked. Thank you!!