Hide logo from mobile overlay menu

Site URL: https://www.rubenvanriel.nl/performance-method

I've created the site www.rubenvanriel.nl and use in the header a white logo.
I've changed on certain pages (for example: https://www.rubenvanriel.nl/performance-method)
the logo because the background is white.

I've used this code in the header code:

I only want to hide the logo for the mobile menu overlay because the logo is not visible anymore on the dark red background.
I've tried a few solutions and codes but none of them are working for me. Can anyone help me out? Thanks a million!

Thanks @bangank36 this worked perfect!

it doesn't work for me 😞

Do you have another code to hide the title logo ONLY when the overlay menu is open?

thanks :)

On 10/12/2021 at 1:24 AM, Gigige said:

it doesn't work for me 😞

Do you have another code to hide the title logo ONLY when the overlay menu is open?

thanks :)

 

Try this. If it doesn't work, please share site url

body.header--menu-open a#site-title {
	visibility: hidden !important;
}

hi there, 

I have tried all of these codes but nothing is working... 

Am I placing in CSS or Header? I have tried both options but the logo is still displaying in the mobile menu overlay..

Is the first header code in the initial question required also? 

I am using 7.1 

Any other advice? 

On 8/17/2022 at 12:20 PM, SarahEnglish said:

hi there, 

I have tried all of these codes but nothing is working... 

Am I placing in CSS or Header? I have tried both options but the logo is still displaying in the mobile menu overlay..

Is the first header code in the initial question required also? 

I am using 7.1 

Any other advice? 

Try this CSS

body.header--menu-open header#header img {
	visibility: hidden !important;
	opacity: 0 !important;
}