Logo inverted on home page, but not on overlay menu

I have a black logo on my website which I managed to invert to white on the home page, with help from other threads in this forum. Works great with the slideshow, the only problem is on the mobile version. When I access the burger menu (which is white) from the homepage, the logo looks weird/semi-transparent. If I access it from the other pages on the site, it's black, which looks better. See screenshots below

The CSS code I used for inverting the logo on the homepage is the following:

body[class*="home"] header#header img {
    filter: invert(1) !important;
    -webkit-filter: invert(1);
}

To invert on overlay menu, use this code

body.header--menu-open header#header img {
    filter: invert(1) !important;
    -webkit-filter: invert(1);
}

@tuanphan thanks for the answer! Unfortunately, it had the opposite effect - with that code it looks like this when accessing the overlay menu from all pages (before, it was fine in all pages except the home page). 
 

If it’s not possible to not invert the logo in the overlay menu, i guess a workaround might be to have another file as the logo only for the overlay menu. Then I can upload the black version and try to resize it to fit the normal header logo (which I upscaled in squarespace). 
 

Anyone have any suggestions for how to do this?

So what should it look like on overlay menu? And it should like that on which page? That above code will invert overlay menu logo on all pages

@tuanphan I want it to be black (see attached image) like this on the overlay menu, as well as all pages except the home page:



To summarize: The only place I want it to be inverted is the homepage, and the problem I currently have is that when I invert it on the home page, it becomes inverted on the overlay menu as well - when accessing the overlay menu from the home page. The logo is black when accessing the overlay menu from the other pages, but I want it to be black even when accessing the overlay menu from the home page. 
 

That solved it! Exactly what i needed, thank you!

On 1/16/2024 at 12:28 AM, tuanphan said:

So to make it black on Homepage - When overlay menu is open, use this CSS code (Don't remove any code in your current code

body.homepage.header--menu-open header#header img {
    filter: invert(0) !important;
    -webkit-filter: invert(0) !important;
}

 

@tuanphan I would like to apply this exact solution to one specific item that's not on the homepage. Specifically #item-64bf680894c511552be6a23a

How would I restructure this code to target that item during the menu overlay?

On 1/30/2024 at 5:01 AM, ccxwood said:

@tuanphan I would like to apply this exact solution to one specific item that's not on the homepage. Specifically #item-64bf680894c511552be6a23a

How would I restructure this code to target that item during the menu overlay?

Use the code

body#item-64bf680894c511552be6a23a.header--menu-open header#header img {
    filter: invert(0) !important;
    -webkit-filter: invert(0) !important;
}

My website:  https://thedolphinsquartet.com

I have attempted to follow and use this advice closely to solve a seemingly very similar, if not the same, problem.  But it is still not working for me - very close, but not fully working.

• I have uploaded a Header Logo Image that is all black with a transparent background.
• I need this logo to appear as black on the homepage, but on all other pages I need it to appear as white.
• When the mobile navigation menu is open, I need this logo to appear as black on ALL pages.

I have used the following CSS code to effect these outcomes:

body:not(.homepage),not(.header--menu-open) header#header img

{
    filter: invert(1);
    -webkit-filter: invert(1);
}

The header logo appears fine on ALL desktop and mobile pages (black on homepage and white on all others).

The header logo appears correct (black) when the mobile menu is open on the homepage, but incorrect (white) when the mobile menu is open on all other pages.

Can you help me correct it?

On 3/14/2024 at 7:06 AM, drhender said:

My website:  https://thedolphinsquartet.com

I have attempted to follow and use this advice closely to solve a seemingly very similar, if not the same, problem.  But it is still not working for me - very close, but not fully working.

• I have uploaded a Header Logo Image that is all black with a transparent background.
• I need this logo to appear as black on the homepage, but on all other pages I need it to appear as white.
• When the mobile navigation menu is open, I need this logo to appear as black on ALL pages.

I have used the following CSS code to effect these outcomes:

body:not(.homepage),not(.header--menu-open) header#header img

{
    filter: invert(1);
    -webkit-filter: invert(1);
}

The header logo appears fine on ALL desktop and mobile pages (black on homepage and white on all others).

The header logo appears correct (black) when the mobile menu is open on the homepage, but incorrect (white) when the mobile menu is open on all other pages.

Can you help me correct it?

Don't remove any code in your current code.

use this CSS code

body.header--menu-open:not(.homepage) header#header img {
    filter: invert(0) !important;
    -webkit-filter: invert(0) !important;
}

@tuanphan  That worked perfectly.  Thank you so much for your help!!!

@tuanphan  Is there a selector in CSS to target ALL the EVENT DETAILS pages?  I have the same problem on the EVENT DETAILS page for each individual event I add - Header Logo Image is inverted, and I want it NOT to be inverted.

Thanks

On 3/19/2024 at 4:30 AM, drhender said:

@tuanphan  Is there a selector in CSS to target ALL the EVENT DETAILS pages?  I have the same problem on the EVENT DETAILS page for each individual event I add - Header Logo Image is inverted, and I want it NOT to be inverted.

Thanks

Use this code

body[class*="type-events"].view-item header#header img {
    filter: invert(0) !important;
    -webkit-filter: invert(0) !important;
}

if it doesn't work, you can share link to an event, I can check easier

Works perfectly.  Thanks so very much!