Blend-Mode: Difference Works on Nav Text But Makes Logo Disappear

Hey! I'm trying to get the contents of my header/nav to invert based on the background color behind it.

I've found that this alone doesn't work:

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

The following code works on the text in the nav, but it just makes the logo disappear entirely:

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

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

Is there a way to adjust this so that the logo will invert based on the background color too (preferable) or is there at least a way to adjust this so that the logo remains the same color but doesn't disappear?

Any help is appreciated! My site is here: https://tyfrisbee.com/

(I don't have any of this code live right now)

I see logo is fine. Do you have a screenshot of problem?