Site title color change based on background
-
"I would like to implement a feature on my website where the site title inverts according to the background, similar to what's seen here: https://lsbstudios.co.uk. I have tried adjusting the title, which is embedded as an SVG, using CSS and JavaScript, but I couldn't achieve a working result. Has anyone ever done something similar before?"
-
Hey Johannes, to achieve the effect, you just need to add the following css:
.sitetitle {
mix-blend-mode: difference !important;
} -
yes that is a great way to do it too!
we also did it this way here by just switching colors when on a black row: -
@domphilcox Thank you for the response. I'm not sure if I'm misunderstanding something, but simply inserting the code into the custom CSS does nothing except invert my current logo. However, it doesn't affect the background. Or am I misunderstanding something?
-
do u have a link @JohannesHaech
? -
of ur website i mean
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it