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

Solved

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

jacobblair104
Tourist
3 0 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 🙂

Accepted Solution (1)

LuffyOnePiece
Shopify Partner
612 88 107

This is an 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

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184

View solution in original post

Replies 4 (4)

LuffyOnePiece
Shopify Partner
612 88 107

This is an 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

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
jacobblair104
Tourist
3 0 1

King of the Shopify community!

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

Thanks so much... Luffy

LuffyOnePiece
Shopify Partner
612 88 107

Hi @jacobblair104 ,

 

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

 

Thank you

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
jacobblair104
Tourist
3 0 1

Yes definitely!