Header CSS is preventing mobile menu from opening on Android

Hello all, 

I have added CSS to create a blur effect on the header and it works great. However, it seems that the line "background-filter" is causing the mobile menu to stop functioning on android devices (it works fine on iphone). Specifically when you click the hamburger icon, it changes to an X but the menu itself won't expand. I have tried a few adjustments to the CSS including adding a -webkit-background-filter line but nothing seems to work unless I completely remove that line. Any ideas? My header code snippet is below.

Website URL is www.adeptmedicalgroup.com
 

Quote

header {
margin: 1vw;
background: inherit!important;
background-color: rgba(255, 255, 255, .3)!important;
backdrop-filter: blur(8px)!important;
border-radius: 45px
}

Thank you! It helped with the menu opening, but now on mobile the header is solid and no longer blurred and faded. Is there a way to do both?

This code will conflict with mobile menu

backdrop-filter: blur(8px)!important;

so if you want to keep blurred on both mobile + desktop, I have no idea to fix problem