Changing Blend Mode for Header Nav

Hi all,

I'm looking to incorporate CSS to my nav header using a difference blend mode on my site:

https://cow-prism-nfr6.squarespace.com/

I've tried adding it to a few elements but haven't had success. Here are a few examples of what I'd like to achieve, thanks!

https://anniversary.blindbarber.com/

https://postcompany.co/information

Thanks again!

Kyle

Hi Kyle.

Saw that you pulled it off. Looks great.

Please share how you did it.

Thx!

8 hours ago, mnik said:

Hi Kyle.

Saw that you pulled it off. Looks great.

Please share how you did it.

Thx!

 

You can try this code to Website > Website Tools > Custom CSS

header#header {
    mix-blend-mode: difference;
}

Hi!

I'm trying to create the same effect you did for your site, however, when I use the code above it just makes my header disappear 😞 Any thoughts on how to fix this? Here is my site below

zaheersukhnandan.com

Guys I have this problem!! omg lol  

so I used this code 

header#header {
    mix-blend-mode: difference;
}

in my cod area of squarespace  website image ayttached there is no website link i just want the nave bar changes colors what code to write that wont  make my logo white when I remove the background from the Nav bar still the logo is white 

what code is missing to make it look like the example I attached the logo changes colors based on the image behind it yet it is not fixed nave bar so it can hover over items and the logo change color 

thank you ALL

1 hour ago, smantha said:

Guys I have this problem!! omg lol  

so I used this code 

header#header {
    mix-blend-mode: difference;
}

in my cod area of squarespace  website image ayttached there is no website link i just want the nave bar changes colors what code to write that wont  make my logo white when I remove the background from the Nav bar still the logo is white 

what code is missing to make it look like the example I attached the logo changes colors based on the image behind it yet it is not fixed nave bar so it can hover over items and the logo change color 

 

thank you ALL

 

 

If you share site url, we can check problem easier

I still havent subscribed because I am not sure how it will loook like  but if you go to this website https://www.zaheersukhnandan.com/ >>>>> which uses square space + blend mode 

OR

if you go to square space and chose the (Nolan) Template thats what I am using right now with white background 

the logo + the nav bar turn white and blend with the white background of my website 

so if we are using this code

header#header {
    mix-blend-mode: difference;
}

what is missing to keep the logo black yet changes when it hovers over images ??

On 6/2/2024 at 12:56 AM, smantha said:

I still havent subscribed because I am not sure how it will loook like  but if you go to this website https://www.zaheersukhnandan.com/ >>>>> which uses square space + blend mode 

OR

if you go to square space and chose the (Nolan) Template thats what I am using right now with white background 

 

the logo + the nav bar turn white and blend with the white background of my website 

 

so if we are using this code

header#header {
    mix-blend-mode: difference;
}

what is missing to keep the logo black yet changes when it hovers over images ??

The site uses CSS code

    header#header a#site-title, header#header div.header-nav-item>a {
        color: #fff;
    }
header#header {
        mix-blend-mode: difference;
    }