Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

Improve this question

I would like to have a transparent nav bar. On the landing page, there will be a slider with images of varying colors, so I would like to change the text color of menu items to contrast against each respective image.

A solution I found here seemed ideal:

However, when I implement here in an HTML builder: , it outputs a totally different effect. Same code, same browser, so I'm assuming it's Wordpress?

mix-blend-mode: difference also seems to have no effect when I've applied it to other selectors from the stylesheet. Is there a reason WP won't output the same as the codepen?

I would love a pure CSS solution if possible. JS as a last resort is doable, but not preferable. I have found SASS solutions, but have no idea what to do with that.

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

Improve this question

I would like to have a transparent nav bar. On the landing page, there will be a slider with images of varying colors, so I would like to change the text color of menu items to contrast against each respective image.

A solution I found here seemed ideal: https://codepen.io/thebabydino/pen/bWWwGa

However, when I implement here in an HTML builder: https://cutt.ly/KwyC2av, it outputs a totally different effect. Same code, same browser, so I'm assuming it's Wordpress?

mix-blend-mode: difference also seems to have no effect when I've applied it to other selectors from the stylesheet. Is there a reason WP won't output the same as the codepen?

I would love a pure CSS solution if possible. JS as a last resort is doable, but not preferable. I have found SASS solutions, but have no idea what to do with that.

• css
• navigation

Share Improve this question asked Aug 9, 2019 at 20:21 hedgehogsweaterhedgehogsweater 533 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

If you inspect the text, you'll see that your theme's CSS is overriding your custom CSS.

You have h2 { color: white; }

but your theme has .widget h2 { color: inherit; }

so "inherit" wins out. If you change your own CSS to

.widget h2 { color: white; }

it will override the theme. Incidentally, the markup here is quite overly complex; you might want to look into a simpler theme without quite so many nested divs.