I just applied a mix-blend-mode: difference to the nav but I have a problem that WF is also applying the blend mode to the dropdown main menu. Any way I can apply the blend mode only to the branding letters, middle nav text & hamburger menu without affecting the dropdown? (The blend mode is only visible on the published site)
It looks like your dropdown menu will need to be a sibling of the
Navbar element rather than a child. The mix-blend-mode applies to all of the content within the
Navbar, which is why it’s being applied to the
I did a quick test and pulled the
nav__menu out of the
Navbar, and that got it a good bit of the way there. You’ll still need to tweak things a bit, but that should get you closer to the effect you’re trying to achieve.
I hope that helps!
Thanks Blake! Indeed, I had to remove the elements I didn’t want blended outside of the nav container. Somehow I managed thanks!