Nav Bar Menu Drop down background blur is broken

my nav bar has a backdrop filter background blur, and I am trying to get the same effect to apply to the nav hamburger drop down menu when that expands. I would like it to have the same background blur and drop shadow as one seamless element, or alternatively if it has the same effects applied to the individual menu in addition to the nav bar. I am not sure how to get my nav background div to expand with the expansion of the hamburger drop down menu, so I was trying to apply the blur to the Nav Menu separately from the Navigation Background. In this case, the background blur of the nav menu does not work. Any help please?


Here is my site Read-Only: Webflow - Scott's Site

1 Like

Hi there,

Backdrop filters create visual effects that apply to the area behind an element. To apply backdrop filters to your navigation menu, you’ll need to ensure the element has some transparency first. You can do this by using SVG or PNG image files, setting a transparent background, or reducing the element’s opacity. Then, add the backdrop filter:

  1. Select your navigation menu element
  2. Go to Style panel > Effects > Backdrop filters
  3. Click the “plus” icon
  4. Choose Blur from the dropdown
  5. Adjust the blur radius to achieve your desired effect

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

Hi, I do have transparency on the Nav Manu with a backdrop blur filter but the background does not blur.