Different Color on Hover for Nav Links

https://eagle-sepia-5laj.squarespace.com/
password: 12345 

Hi! I would like: when the user hovers over nav links in the header (the nav links you see are just normal nav links with a pill shape around it - not to be confused with actual "buttons"), the pill shape fills with a color. I would preferably like each nav link pill shape to be filled with a different color (design work be filled with #745C8E, fine art be filled with #2D6945, contact be filled with #C8553D - all with black font) 

Thank you!

Hi @kaydotjpg, your site is private, cannot access. 

oh jeez @melody495 sorry about that! You can now view the site: 

https://eagle-sepia-5laj.squarespace.com/
password: 12345 

You can add this code to Website Tools (under Not Linked) > Custom CSS

div.header-nav-item:nth-child(1):hover {
    background-color: #745C8E !important;
}
div.header-nav-item:nth-child(2):hover {
    background-color: #2D6945 !important;
}
div.header-nav-item:nth-child(3):hover {
    background-color: #C8553D !important;
}

@tuanphan Thank you- this worked perfectly! If I also wanted these colors to stay active while on the page, how would I do that? Thank you 🌀

On 12/4/2023 at 10:03 PM, kaydotjpg said:

@tuanphan Thank you- this worked perfectly! If I also wanted these colors to stay active while on the page, how would I do that? Thank you 🌀

Use this new code

div.header-nav-item:nth-child(1):hover, div.header-nav-item--active:nth-child(1) {
    background-color: #745C8E !important;
}
div.header-nav-item:nth-child(2):hover, div.header-nav-item--active:nth-child(2) {
    background-color: #2D6945 !important;
}
div.header-nav-item:nth-child(3):hover, div.header-nav-item--active:nth-child(3) {
    background-color: #C8553D !important;
}

How about mobile? Do same or do it on desktop only