Overriding code for logo on mobile menu

Hello everyone!

I am using a code block for having a different logo on the home page than on the rest of my site. This is working fine on desktop. However, on the mobile nav menu I need the original logo to show because the background is white. Can anyone help with overriding the code on the mobile home nav menu only?

The code I'm using is:

<style>
  header#header img {
    content: url(https://images.squarespace-cdn.com/content/v1/636d0f73e540cf158d3b612a/55792a1c-89a6-4167-bc31-a08815d9f128/AAC_logo_neg.png
      );
}
</style>

Also attaching screenshots of the logo on both the home menu and one of the other pages.

Any help on this is greatly appreciated!

Marte

Change to this code

<style>
@media screen and (min-width:992px) {
  header#header img {
    content: url(https://images.squarespace-cdn.com/content/v1/636d0f73e540cf158d3b612a/55792a1c-89a6-4167-bc31-a08815d9f128/AAC_logo_neg.png);
}}
</style>