How to replace logo in dropdown menu for mobile version

How can I change the color of the site's logo when the dropdown menu is clicked? The main logo is difficult to see on a blue background and I'd like to show a white version of the logo when the dropdown is in effect. There's currently a white logo added into the dropdown area itself, but this is just a placeholder/temporary solution. The original logo still appears above it.

Screenshots for reference

Hi Milla I can help you with this:

1. Upload your alternate logo under design -> custom css -> manage files

2.  Upload this code and just input the collection id and url of the logo

/**mobile logo**/
@media screen and (max-width:767px) {
#collection-id-here .header-display-mobile .header-title-logo img {
content: url("insert-url-here") !important;
max-height:inherit !important;

  }
}

On 5/21/2024 at 6:14 PM, Websley said:

Hi Milla I can help you with this:

1. Upload your alternate logo under design -> custom css -> manage files

2.  Upload this code and just input the collection id and url of the logo

/**mobile logo**/
@media screen and (max-width:767px) {
#collection-id-here .header-display-mobile .header-title-logo img {
content: url("insert-url-here") !important;
max-height:inherit !important;

  }
}

Thanks for your response. That seems straightforward but I am unfamiliar with some of this.

What do I need to input for collection id, where can I find that?

I don't see a design section of my site. Is that a permissions issue, or has Squarespace changed their layout?

You can use this CSS to Website Tools > Custom CSS. Replace with real new logo url

body.header--menu-open header#header img {
	content: url(paste your new logo url here);
}