Change logo on mobile overlay menu

Due to the colours of the logo and the backgrounds on each page, my website requires different version of my logo on some pages than others. The most challenging part appears to be on mobile, when you enter the overlay menu, the background is white, so I need to use a black version of my logo rather than the white version used on most pages, including the homepage. How can I do this? I'm using the Colima template.

Can you share site url? We can check easier.

Hello, I'm looking for a solution for the same problem: I need to use a white version of the logo only on the mobile overlay menu, while the regular mobile logo stays the same as on desktop view.

Anyone can help?
website : pentanpl.squarespace.com
psw:  pentanpl

Thank you!

EDIT:

While I'd still like to show a specific logo onto that mobile menu overlay  (when mobile menu is open after click on), I found a code (attached below) that inverts the color of the logo on overlay menu. It could be an acceptable solution if no other solution pops up. 
Here's the code to invert the color, in case someone else needs it:

// invert logo color on mobile menu overlay only//
.header--menu-open 
{ 
  .header-title-logo {
    -webkit-filter: invert(100%);
     filter: invert(1);
            filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
}
// END invert logo color on mobile menu overlay only//

Try this code

body.header--menu-open .header-title-logo img {
    visibility: hidden
}

body.header--menu-open .header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/60c5476970fe8d18bb331890/t/616f0047d19d44108ddafbbb/1634664519505/Logo+Penta+NPL+negativo.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    max-height: unset
}