Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
Jess_Garda

Having different hover color on each nav link

Recommended Posts

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.)

Share this post


Link to post

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.


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...