Add graphic behind navigation pages on hover

I'm building a website for a client, and she wants a brushstroke png file to appear behind the individual navigation pages on hover. She ideally wants a different color for each, but at this point, it's fine if I can just get one to appear for all the pages. Does anyone know how to do this? I tried following a YouTube video which didn't work.

Hi Lauren,

Could you share the URL to your website so that we can provide a code to achieve the desired effect. Without seeing the page it is much more difficult to assist you.

Thanks!

-Dan

Link: https://helen-kirkum.squarespace.com/

password: helenkirkum

It's on Squarespace 7.0 - Rally/Brine family

This was the video I tried to watch but it didn't work for me: 

Thanks!

20 hours ago, laurentaylar said:

Link: https://helen-kirkum.squarespace.com/

password: helenkirkum

It's on Squarespace 7.0 - Rally/Brine family

This was the video I tried to watch but it didn't work for me: 

 

Thanks!

 

You mean like this?

/* Products item */
.Header-nav-item[href="/products"]:hover {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/04/squarespace-add-image-block1-min.png);
    color: transparent !important;
    background-repeat: no-repeat;
}

On 5/22/2021 at 5:15 AM, tuanphan said:

You mean like this?

/* Products item */
.Header-nav-item[href="/products"]:hover {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/04/squarespace-add-image-block1-min.png);
    color: transparent !important;
    background-repeat: no-repeat;
}

Thank you!! I think so but it doesn't seem to be working when I change out the image. When I test it, the navigation title goes white: https://www.loom.com/share/c009af4dd3e84daaaef8a300039a10cb

From the YouTube video I provided, that's exactly what I want, except I need the images to appear only on hover.

On 5/24/2021 at 9:35 PM, laurentaylar said:

 

Thank you!! I think so but it doesn't seem to be working when I change out the image. When I test it, the navigation title goes white: https://www.loom.com/share/c009af4dd3e84daaaef8a300039a10cb

From the YouTube video I provided, that's exactly what I want, except I need the images to appear only on hover.

 

Can you keep the code in Custom CSS? We can check it easier

3 hours ago, tuanphan said:

Can you keep the code in Custom CSS? We can check it easier

Sorry, I just added it back in.

On 5/26/2021 at 11:54 AM, tuanphan said:

.Header-nav-item[href="/products"]:hover { background-image: url(https://static1.squarespace.com/static/609bf3a05454d3241cf1d697/t/60a6c8b3d5bb325fd26001ae/1621543092037/backer_yellow.png) !important; color: transparent !important; background-repeat: no-repeat; background-size: contain; }

THANK YOU SO MUCH!! You're a lifesaver Tuan!

On 5/28/2021 at 1:22 AM, laurentaylar said:

THANK YOU SO MUCH!! You're a lifesaver Tuan!

Do you want to fix these issues?

Site URL – https://helen-kirkum.squarespace.com/

1. (Tablet-Homepage) reduce text size?

2. (Tablet-Homepage) Increase text width?

3. (Tablet-Homepage) Similar

4. (Mobile-Homepage) Make client lists side by side?

5. (Tablet-Products)

6. (Tablet-Projects)

7. (Tablet-Make to order) Increase text width?

8. (Tablet-Make)

9. (Tablet-Make) Increase text width?