Exception for Blend Mode on one page

[MaxWinter]

Re: Mix-Blend-Mode for .sitetitle and .menu-item

Hello everbody!

Thanks for figuring all that stuff out! Using the blend mode for an upcoming website now and was wondering, how a could give one side an exception. Tried to use the slug way but if i turn the color just white for the page, it wont be see at all because of the blend mode. So how could i deactivate it for one page?

Here is the code i am using:

nav.primary{
	mix-blend-mode: difference;
}

.sitetitle {
	mix-blend-mode: difference;
}

/* site title */
body.type-category.id-4 .sitetitle.txt .sitetitle-txt-inner span{
	color: #000000;
}
/* navigation */
body.type-category.id-4 nav.primary a span{
	color: #000000;
}

I had hoped that there would be a simple solution that would not take much time to explain :)

Cheers, Max

[MaxWinter]

Hello,

just wanted to push this topic a little bit. If there is a simple solution i could find elsewhere i would be very happy if someone could let me know :)

Could not find an answer to this in the forum.

Have a great day!

Cheers, Max

[Richard]

Dear Max

@MaxWinter

" if i turn the color just white for the page, it wont be seen at all because of the blend mode."

The aim is not to have the site-title & navigation mix-blend-mode?

What happens to your page when setting the body background colour transparent?

body{
   background-color: #0000ffff;
}

"Tried to use the slug way"
https://laytheme.com/documentation/custom-css-styling.html#css-based-on-current-page

Based on the page or project's slug- you could reset the mix-blend-mode:difference

nav.primary{
	mix-blend-mode:normal !important;
}

.sitetitle {
	mix-blend-mode:normal !important;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

https://css-tricks.com/almanac/properties/m/mix-blend-mode/

---

Talk soon ✨

Richard