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

Store Design

Topic summary

A user is attempting to implement an inverted header design where the logo and menu content appear white/transparent initially, then switch to black when the menu is opened or hovered over.

Desired Effect:

  • Transparent header with white logo and content by default
  • Logo and menu revert to black upon menu interaction
  • Similar to implementations seen on colebuxton.com and dogfishmen.com (mobile version)

Current Issue:

  • Using Reward menu on their Shopify store (santirvigo.myshopify.com)
  • Tried WebSensePro’s transparent header but it maintains transparency when menu is open
  • Results in a “transparent block” appearance rather than the desired color inversion
  • Problem occurs on both desktop and mobile, specifically in header position on homepage

The user is seeking coding assistance to achieve this interactive header behavior.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

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.