Jump to content

Change Color of each Navigation link on Hover and when active

Go to solution Solved by tuanphan,

Recommended Posts

Hello guys!

Is it possible to change the colour of each navigation link on Hover and Active for Squarespace version 7.1? I am using Mark Novo template! 

Ex:  I want the 'Product' text link to turn blue when hovered and remain blue (bold) when active and I want the Video text link to turn red when hovered and red (bold) when active.  

If none of the navigation links are hovered or clicked, I want them to remain 'grey'.

Help please!

 

 

Link to comment

Add to Home > Design > Custom CSS

/* nav hover */
.header-nav-item:hover>a, .header-nav-folder-item:hover a {
  color: red !important;
}
/* av active color */
.header-nav-item--active>a, .header-nav-folder-item--active>a, .header-menu-nav-item--active>a .header-menu-nav-item--active {
    color: green !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Hello @tuanphan 

Thank you for your help I applied your code into my website and it made a lot of difference. 

I have a follow up question.

Here is the link for my website:

https://caterpillar-antelope-zbjy.squarespace.com

password: ptphoto

At the moment, I have four navigation links: About, Projects, Films and Shop.

If I hover on 'About' I wonder if it is possible for the text to appear 'Red' and remain red when I visit About (active).

If I hover on 'Projects', I want the text to appear 'Yellow' and remain Yellow when I visit About Projects(active).

If I hover on 'Films', I want the text to appear 'Blue' and remain Blue when I visit Projects(active).

If I hover on 'Shop', I want the text to appear 'Orange' and remain Orange when I visit Shop(active).

Please do excuse my demands and thank you in advance for helping me out. 

 

 

 

Link to comment
  • Solution

Repeat, replace page url for other links

/* about hover */
.header-nav-item a[href="/about"]:hover {
    color: red !important;
}
/* about active */
.header-nav-item--active [href="/about"] {
    color: red !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 6 months later...

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.