I’m currently working through a navigation problem involving the ‘Difference’ blend mode working from desktop — mobile. On desktop, the logo displays the navigation on mouse hover. The logo’s blend mode is set to ‘Difference’, so that it (and the navigation, when hovering) shows up no matter what is scrolled over. This works properly on desktop.
On mobile, the logo has an interaction currently set to ‘tap’, where it pulls up a fullscreen takeover with a black background + navigation. However, because of the black background, I’m not able to find a way to properly set the logo to ‘Difference’ blend mode, so that it shows up on top of any page content (similar to desktop), AND have the background remain black to cover the page contents with the fullscreen nav takeover:
When I set the whole header nav’s container to ‘Difference’, the black background doesn’t show up (blending into the page), which allows the page content to be visible under the mobile nav. When setting only the logo to ‘Difference’, it is somehow canceled out or something by the entire container’s lack of change in blend mode, and it no longer inverts the color on top of the page contents.
Does this make sense? Does anyone know of a solve for this?
Thanks!
Here is my public share link: Webflow - Bosh Advisors