Disable overlay effect for the menu on mobile

I used this code below to make overlay effect for desktop, but the logo and hamburger menu on mobile is not reflected. Also when I open the menu, I just want a normal design.

   header#header a#site-title, header#header div.header-nav-item>a {
        color: #fff;
    }
header#header {
        mix-blend-mode: difference;
    }
}

Can someone help with this?

Thanks you!

This code below but when I open the menu, the background is gone.

header#header {
    mix-blend-mode: difference;
}

Wrap with media code to exclude mobile menu

@media screen and (min-width:992px) {
header#header {
    mix-blend-mode: difference;
}
}