Hide logo on Jasper Mobile menu

I'm working with Jasper template and using site logo as .png image. How can I hide site logo or place different logo image in Mobile menu only?

@neisako try adding this code to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.Header-branding {
   display: none;
}
}

Reference: https://beaverhero.com/jaunt-template-squarespace/#Hide_Logo

@taunphan thanks for the reply, but I didn't ask my question correctly. I would like to hide the logo image when the Mobile menu is open if possible?

@neisako yes, you can with custom JavaScript/jQuery. But it is beyond my level. Hope someone else will help you.

You can also post on Facebook (Squarespace Community, Squarespace Customize Resource Group,...), because questions like this, it will be difficult for someone to help, because it takes time to check & find javaScript/jQuery..

Thank you for the advice.

Old thread, but I found some success with this line of CSS (for Squarespace 7.1):

.header--menu-open .header-title-logo img {
  display: none;
}