Having different hover color on each nav link

My site is www.jessicagarda.com.

I'd like for each link in my navigation (Home, About, Services, etc.) to have a different color when selected or hovered on (Home would be pink, Services would be green, About would be blue, etc.)

Add the following to your custom css after any other code that may be there. 

.Header-nav--primary .Header-nav-inner {
	a.Header-nav-item[href="/"]:hover {
		color: pink !important 
	}
	a.Header-nav-item[href="/about-jessica-1"]:hover {
		color: blue !important 
	}
	a.Header-nav-item[href="/services-1"]:hover {
		color: green !important 
	}
	a.Header-nav-item[href="/praise"]:hover {
		color: blue !important 
	}
	a.Header-nav-item[href="/portfolio"]:hover {
		color: blue !important 
	}
	a.Header-nav-item[href="/blog"]:hover {
		color: blue !important 
	}
	a.Header-nav-item[href="/contact"]:hover {
		color: blue !important 
	}
}

You should then change the color values to those you want.  NB. I've inserted named colours but you can get more shades using hex or rgb colours.

I'm trying to make each hover color different on my site and this code isn't working for me. Wells template. Any advice would be super appreciated!

Edited to add, here's my site: https://myriadcreative.co/about

On 2/8/2022 at 5:27 AM, ehesslen said:

I'm trying to make each hover color different on my site and this code isn't working for me. Wells template. Any advice would be super appreciated!

Edited to add, here's my site: https://myriadcreative.co/about

Use this CSS for Wells

nav#mainNavigation>ul>li:nth-child(1) a:hover {
    color: blue !important;
}
nav#mainNavigation>ul>li:nth-child(2) a:hover {
    color: red !important;
}
nav#mainNavigation>ul>li:nth-child(3) a:hover {
    color: green !important;
}