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

[jacobblair104]

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 🙂

[LuffyOnePiece · Accepted solution]

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 </body>

<script>
document.addEventListener('DOMContentLoaded', function() {
 var headerSticky = document.querySelector('.shopify-section-header-sticky');
    var headers = document.querySelector('.header'); 

    headers.addEventListener('mouseenter', function() {
        headerSticky.classList.add('scrolled-past-header');
    });
    headers.addEventListener('mouseleave', function() {
        headerSticky.classList.remove('scrolled-past-header');
    });
});

</script>

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

[jacobblair104]

King of the Shopify community!

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

Thanks so much... Luffy

[LuffyOnePiece]

Hi @jacobblair104 ,

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

Thank you

[jacobblair104]

Yes definitely!