Change Logo and Font Colour on Header Mouseover (Dawn Theme)

Store Design
, , ,
1

Hey everyone!

My website is https://okane.co.nz/

My navigation bar (header) is a drop-down mega menu that currently opens on hover.

The goal is to have a White (#FFFFFF) logo and menu text, and then when you mouseover / hover over the nav bar (header), the logo and menu text switches to Black (#000000).

Here’s an example of a company that does this effect: https://www.rmwilliams.com.au/

I’ve managed to sort out the white logo and menu text pre mouseover and a black logo and text when you scroll down but I’m currently trying to figure out the right code to change the nav bar logo and menu text on mouseover/hover.

If it’s too difficult and would need a developer that’s fine as well, any recommendations would be amazing.

Thanks for helping out in advance :slightly_smiling_face:

1 Like
2

Hi @jacobblair104 ,

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code just above tag

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

King of the Shopify community!

Worked perfectly, thanks for sparing some of your time on this, really appreciated :slightly_smiling_face:

Thanks so much… Luffy

4

Hi @jacobblair104 ,

Thanks and let me know if you need help with the custom code in the future.

Thank you

1 Like
5

Yes definitely!