Hover effect on menu?

Store Design
, , ,

Topic summary

A user needed help implementing a hover effect on their store’s header menu. Specifically, they wanted the secondary logo to appear on hover while the primary logo hides.

Solution Provided:
Another community member shared CSS code to add to the base.css file:

  • Shows the primary logo on header hover
  • Hides the transparent logo on hover
  • Uses !important declarations to override existing styles

Initial Concern:
The user initially reported that the code caused menu and shopping cart icons to display in black on mobile devices.

Resolution:
This was clarified as a false alarm—the CSS hover effects don’t apply to mobile devices (hover events don’t exist on touch screens). The user confirmed everything was working correctly after double-checking. The issue was successfully resolved and marked as solved.

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

Trying really hard to make this work as it’s the last thing I have to figure out.. I managed to make it so the secondary logo appears when the sticky header function is working and the background of the transparent header changed to white on hover but the logo remains the primary. Any help would be greatly appreciated, thank you :slightly_smiling_face:

https://g95u25r5wnp5oqll-83068584245.shopifypreview.com

2

Hi @curator_2 ,

Try adding below css to base.css file.

header:hover a.header__heading-link:not(.logo-ransparent) {
    display: block  !important;
}

header:hover a.header__heading-link.logo-transparent {
    display: none !important;
}

If you require further help to optimize or customize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
LuffyOnePiece

1 Like
3

Thank you a thousand times!!! You just made my day :slightly_smiling_face:

1 Like
4

Hi @curator_2 ,

Can you please like all the answers?

Have a good day !!

1 Like
5

Ahhhh I just noticed that the menu and shopping cart icon on mobile now show as black with the above code. If you know of anything simple that can be done to fix that it would be amazing if not I’ll keep searching online and hope to find a solution :slightly_smiling_face: almost there so close

6

just did, please let me know if you are able to help with the colour of the menu icons on mobile.. it would be really really appreciated (see above)

7

Hi @curator_2 ,

The above code does not change anything on mobile devices as the hover event doesn’t exist in mobile devices.

Can you please let me know what you need for the mobile devices?

Thank you

1 Like
8

My bad my friend I was looking at the wrong duplicate my eyes are tired!! Everything all good thank you again so much :slightly_smiling_face: