Jump to content

Different Color on Hover for Nav Links

Recommended Posts

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!

Link to comment
  • Replies 5
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

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

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd

💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

Link to comment

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.