Enlarged logo with code for mobile header. Now logo is misaligned in mobile view...

Site URL: https://www.omega-environmental.org

I wanted to enlarge the logo on this site, as the mobile view made it appear tiny. I recently found this custom code (see below) on another post, which worked to enlarge the logo, however now the logo is aligned too low within the header and when you scroll down on the mobile view, it hangs a bit below the header.  
Ideally, I would like to enlarge the logo a bit more, without it bleeding down below the header when scrolling on mobile - but also keep it center-aligned with the hamburger menu.
Is this possible?   TY!!

Code currently using:  
@media screen and (max-width: 767px) {
    .header-title-logo img {
        max-height: 60px;
    }
}

You shouldn't need code for this, you can adjust the mobile logo size in the header logo settings:

Yes, but that way also enlarges the header, stretching it down the screen more.  I do not want the header space any taller.

1 hour ago, Nicole_DG said:

Yes, but that way also enlarges the header, stretching it down the screen more.  I do not want the header space any taller.

Then you probably want to adjust the padding, try this code and adjust the values, you will still need to adjust the logo size:

@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width: 799px) {
    .header .header-announcement-bar-wrapper {
        padding: 4vw 4vw;
    }
}

Thank you for your assistance. 
I've tried that and I can see it does adjust the padding, unfortunately it does not address the alignment issue with the hamburger. Also part of the logo still hangs below the header when scrolling, which is probably the biggest issue.