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

Home Forums Support Can we do this effect with GP? (header border)

  • This topic has 5 replies, 2 voices, and was last updated 5 months ago by Leo.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #1462226

    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 πŸ™‚

    Customer Support

    Hi there,

    The code is suggesting that it’s just using a simple bottom-border:


    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 πŸ™

    Customer Support

    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.


    It works! πŸ™‚ Thank you Leo!

    You are the best.

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

    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.