how can i have a inverted menu logo including header content until hover or menu clicked/open

[craigsv]

I've been trying to code the above but im having no luck. 

ideally i want to have the same as this webstore www.colebuxton.com  or www.dogfishmen.com (dogfishmen mobile version) or in truth this website also. They all  appear to be transparent with inverted logo and content (white) then once menu open it reverts to logo and menu black, and id like this only on the homepage. 

i've tried th transparent header from WebSensePro but when menu is open on mobile and desktop the transparent effect remains transparent in the header position, it looks like a transparent block. 

Im also using drawer menu, my site is https://saintvirgo.myshopify.com/ pw - 2024 please can someone help, thanks.