Vertically center a "reduced size" logo with the mobile menu icon?

I had the same issue as some others with the mobile menu icon “overlapping” the logo. I fixed it with this code:

@media only screen and (max-width: 767px) { .responsive .logo a, .responsive .logo img { max-width: 63%; height: auto !important; margin-top: 7px!important; } }

However with that code, the shrunken “logo” sits near the top of the header box, so that it looks vertically “offset” compared to the “vertically centered” mobile menu icon. I can’t increase the “margin top” px distance for the logo, because that messes things up with tablet size screens.

1. Rather than having the shrunken logo set a “fixed distance” from the top using this “margin-top: 7px!important;” — is it instead possible to “vertically center” the shrunken logo with the mobile menu icon (i.e. so that a horizontal line drawn through the center of the logo would also cross through the center of the mobile menu icon)?

2. Also under the “@media only screen and (max-width: 767px)” conditions above, is it possible to “reduce” the size of the mobile menu icon, so that it is not so large relative to the shrunken logo size?

(Sorry I can’t provide a page link, as I am doing development offline before going live.)