Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • December 15, 2021 at 12:05 pm #1332932
    vbonora

    Hello kriesi,
    I would like to get a mix-blend effect: difference; header with content. I inserted this code in my css .html_header_sticky #top #wrap_all #header {
    mix-blend-mode: difference;
    } and it works. In the site I have also set the hamburger menu from the desktop, when I open the menu it is shown in difference mode. How can I only show the burger menu in normal mode?

    Thanks in advance

    December 15, 2021 at 12:57 pm #1332940
    Nikko

    Hey vbonora,

    It seems the mix-blend-mode could not be removed on child elements: https://stackoverflow.com/questions/31629541/remove-mix-blend-mode-from-child-element#answer-68496283
    Instead of applying it to the header directly, try to add it to the header_bg element:

    #top #wrap_all #header .header_bg {
    mix-blend-mode: difference;
}

    Hope this helps.

    Best regards,
    Nikko

    December 15, 2021 at 5:03 pm #1332999
    vbonora

    Hi Nikko,
    I tried your suggestion but it doesn’t work. Can you tell me more?

    December 16, 2021 at 12:14 pm #1333110
    Ismael

    Hi,

    Thank you for the update.

    Would you mind providing a screenshot of the issue? The background of the mobile menu container is set to black when we checked the site. The header is also transparent, no blend mode. Please note that mix-blend-mode property will only work if you apply it on an element that is a direct child of another element. You should not expect the element to blend with other elements in the page, aside from its parent element.

    // https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

    Best regards,
    Ismael

    December 16, 2021 at 12:32 pm #1333113
    vbonora

    Hi Ismael, I have enabled the css style: 

    .html_header_sticky #top #wrap_all #header {
mix-blend mode: difference;
}

    Look now

    December 20, 2021 at 5:20 am #1333483
    Nikko

    Hi vbonora,

    We apologize for the delayed response.
    It seems the only place where that code could be effectively applied is in the header which is what you have done, unfortunately, applying this to the logo and menu items except for the burger menu won’t do anything, which seems to suggest that it only works on sibling elements (i.e. between the header and main) then applies to all its child elements. So what you want to achieve could not be done in this current layout, you’ll need to move the burger menu out of the header and make it its sibling element, which would most likely result in some functionalities not working properly.
    I tried to force the burger menu overlay to have a black background however it doesn’t work as well :(

    Best regards,
    Nikko

    December 20, 2021 at 1:19 pm #1333532
    vbonora

    Thanks for the reply. I hope in the implementation of the next update.
    We can close the ticket.

    December 20, 2021 at 3:01 pm #1333544
    Rikard

    Hi,

    Thanks for the update and feedback. We’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Header effect of mix-blend mode’ is closed to new replies.