Blend mode on nav bar without affecting the nav menu?

Heyyy,

I’ve added the blend mode difference to my navbar. I only want this to affect the logo and hamburger icon, not the expanded menu.

I read somewhere, blend modes can only affect the parent element, and this seems correct. So the blend mode is only working when I add the class to the ‘navbar’ element.

Any ideas on how to not let it affect the expanded menu? and only work on the logo/hamburger

Appreciate any help!


Here is my site Read-Only: ** https://preview.webflow.com/preview/geronimo-bd7df4?utm_medium=preview_link&utm_source=dashboard&utm_content=geronimo-bd7df4&preview=a86f00fd05910bfc01c4ba6aa8d03793&mode=preview**
([how to share your site Read-Only link][2])

Did you ever figure this out? I am having the same issue but I am using blend modes in the background of my nav. I tried using a div block underneath the nav with the active blend mode and create an animation that show/hides on rollover and it worked but the animation just keeps glitching on publish. So annoying.

1 Like