mix-blend-mode on mobile not working
-
Dear Laytheme team,
Using the following code in "Custom CSS & HTML" > "Custom CSS", mix-blend-mode for my site title and menu seems to be working fine on desktop, however, it fails to show on mobile. Would you be able to help me to get it to work on mobile? Many thanks! :)
.sitetitle {
mix-blend-mode: difference;
}
.sitetitle-txt-inner {
color: white;
}.primary {
mix-blend-mode: difference;
}
.primary span {
color: white;
} -
the mobile nav has the class
.mobile-navon mobile, not .primary
and the site title has the class
.mobile-title
you'd need to inspect the elements using developer tools in chrome for example, resize the website so the mobile version is shown
google how to use chrome inspector
-
@arminunruh Thank you, you are a genius! :)
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