[Resolved] Can we do this effect with GP? (header border)

[David]

Hi GP Team!

I want to make a CSS effect on a header like this site (scroll down to see the effect).

It’s a mix-blend-mode. Can we archive this with GP?

Thanks 😉

PD: I’m trying the new 3.0 version 🙂

[Leo]

Hi there,

The code is suggesting that it’s just using a simple bottom-border:
https://www.screencast.com/t/iFAuiiYLMRq

[David]

Hi Leo!

Yes, I can do the black line with border property.

The question is the “visual effect” between the line (or the menu text) and the background. If you can see, always exist a contrast between them.

It’s like a “fusion mode” in Photoshop. I found this post but its not working for me 🙁

[Leo]

I took a look at the example website again and am seeing the effect but not seeing any special CSS.

The CSS trick page you found seems promising though.

It doesn’t work with something like this?

.main-navigation {
    border-bottom: 1px solid;
    border-bottom-color: #000;
    mix-blend-mode: difference;
}

This shouldn’t be a theme related question though so you might have to spend a little more time with the CSS.

[David]

It works! 🙂 Thank you Leo!

You are the best.

Good luck with 3.0 version. I will be very good as always you do.

[Leo]

No problem 🙂

[Author]

Posts