Custom Hamburger - Change On Hover?

I have implemented a forced hamburger on desktop and added my own image which I am happy with. However, it would be amazing if I could get it to change colour on hover. I did look at adding a 'change image on hover' but I cannot find a Block ID for it.

Any ideas?

https://dinosaur-horse-8k34.squarespace.com/

PW: notyet

@tuanphan @Ziggy  Any ideas guys?

To change the colour on hover you would most likely have to swap the image in CSS, unless you want to simply invert the image.

What code did you use to change the hamburger menu icon to an image?

9 hours ago, Shadmon said:

@FTWSGEM Hi, You can add this CSS code. Just add your image there and it will show on hover.

.burger-inner:hover::after {
    background-image: url(add your image url here);
}

Let me know if it helps!

That is perfect, thank you @Shadmon

How would I get this to also work for the logo?

@FTWSGEM We can do that easily by javascript. Can you confirm you have subscribed to a business plan?

@Shadmon I have a business plan with the site I am looking to replace. This one is on a trial.

@FTWSGEM with logo try this code, replace Pixabay with your logo url

.header-title-logo a:hover img {
    content: Url(https://cdn.pixabay.com/photo/2024/02/28/14/01/woman-8602128_1280.png);
}

54 minutes ago, tuanphan said:

@FTWSGEM with logo try this code, replace Pixabay with your logo url

.header-title-logo a:hover img {
    content: Url(https://cdn.pixabay.com/photo/2024/02/28/14/01/woman-8602128_1280.png);
}

 

This gives me a syntax error 😞

On 3/25/2024 at 4:26 PM, FTWSGEM said:

This gives me a syntax error 😞

change U to lowercase u

If it still appears problem, you can take a screenshot, I can check again easier