[Resolved] Mix-Blend-Mode Not working

[Andy]

Hi,
I’m trying to recreate a similar effect that this site has on it’s social media links at the bottom of the page and apply it to my main navigation links:
https://tinyurl.com/8785bvvz

Basically its color changes as you scroll based on the colors of the background-image.

I’ve tried using mix-blend-mode:difference; on various elements on my navigation such as:
.main-navigation or .main-navigation .main-nav ul li or .main-navigation .main-nav ul li a but nothing seems to take effect.

Any advice appreciated.

[Ying]

Hi Andy,

For the question that’s purely about GB, could you please open the topic in its own support froum?

Pro version: https://generateblocks.com/support/
Free version: https://wordpress.org/plugins/generateblocks/

Thanks for your understanding!

[Andy]

Hi,
I’m not sure I understand the main nav is generated by GP not GB?

[Ying]

Oops, I misread your question, sorry for that!

In order to make mix-blend-mode:difference; work, the background color of the header needs to be set to transparent, then set the menu item link color to #ffffff.

Then add this CSS:

header#masthead .main-navigation {
    mix-blend-mode: difference;
}

[Andy]

Thanks so much for this, it’s working now.

However, on the pages under the ‘Work’ menu for some reason it’s not working, I think its because of this CSS:

.header-wrap #site-navigation:not(.toggled) .main-nav > ul > li > a { color:##0a0a0a; }

But I can’t figure what is generating this css?

[Ying]

Looks like you have a Header element assigned to these pages, but the header element is empty, only the background color shows.

If there’s no content in the header element, I would recommend removing it.

Let me know if this helps 🙂

[Andy]

Thanks, I needed custom headers on certain pages so I changed the nav color settings to white in the header options and that seems to have fixed it.

I still cant get the same effect to work on the Contact link though. Tried adding the following CSS:

header#masthead .menu-bar-item a {
mix-blend-mode: difference;
}

However, in the Customizer settings, under the Color > Header options I’ve tried changing the color of links to white but that didnt work. I’ve temporarily changed it to ##d8d8d8 just so you can see it. But any ideas how I can get the mix-blend-mode working on this too?

[Ying]

Try this CSS instead and set its color to #ffffff:

.menu-bar-item.slideout-toggle {
    mix-blend-mode: difference;
}

Let me know 🙂

[Andy]

Hmm its strange, whenever I add that CSS it makes the rest of the navigation links white and stops the mix-blend mode from working on them.

[Ying]

The CSS is only targeting the menu bar item, regardless it won’t affect other menu items.

I tested in dev tool, it works well.
https://www.screencast.com/t/DJlcuTxdgTN3

Could you add the CSS in first? I’ll take a look at the code then.

[Andy]

ok I’ve added the code and now you’ll see all the links are not visible.

[Tom]

Hi there,

Is this still the case? Things look good to me?

Let us know 🙂

[Andy]

I think something odd has been going on with the server cache and it was effecting my CSS, its working great for me now too.

Thanks so much for all the help with this!

[Tom]

Glad it’s working now 🙂

[Author]

Posts