Jump to content

Hover States for Footer Links in 7.1

Recommended Posts

Does anyone know how to make footer links display a different hover state (color)? I’ve already disabled the underline with this code:

footer .sqs-block-html a {
  background-image: none !important;
  background-repeat: no-repeat !important;
  text-decoration: none !important;
}

Now I’d like to have the hover state display in a different color. Can’t seem to find anything online and what I do find doesn’t work. I’m just a designer don’t know much about code other than where to put it in 7.1. 

Edited by cheriek
Added more information.
Link to comment

Add to Design > Custom CSS

/* footer links hover color */
footer.sections a:hover {
	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
  • 10 months later...
14 hours ago, Iwan said:

Hi there @tuanphan this code does not work for me? Please help?

https://beige-oleander-mp66.squarespace.com/

Can you try again? I just tested & it should work

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
  • 1 month later...
20 hours ago, IwanJ said:

Hi @tuanphan, hope you're well? I'm trying the above code on the footer of this site:

https://deep-learning-cafe.squarespace.com/

password: password123

I need to change the hover colour for the centre menu (to blue) and the right menu (to yellow)

Can you please help?

Add to Design > Custom CSS

/* Footer links hover */
div#block-c8b8e06bb4251545263a a:hover * {
    color: #2E7B98 !important;
}
div#block-a07cc8ebb76653972a81 a:hover * {
    color: #E1AD01 !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...

Hi @tuanphan 

I'm scratching my head as to why your code is not taking effect on this site...

footer .sqs-block-html a {
  background-image: none !important;
  background-repeat: no-repeat !important;
  text-decoration: none !important;
}
/* footer links hover color */
footer.sections a:hover {
    color: red !important;}

 Please advise ~ thank you so much!

https://alicia-schooler-hugg.squarespace.com/

alicia (lowercase)

Link to comment
On 12/6/2022 at 3:09 PM, authenticeye said:

Hi @tuanphan 

I'm scratching my head as to why your code is not taking effect on this site...

footer .sqs-block-html a {
  background-image: none !important;
  background-repeat: no-repeat !important;
  text-decoration: none !important;
}
/* footer links hover color */
footer.sections a:hover {
    color: red !important;}

 Please advise ~ thank you so much!

https://alicia-schooler-hugg.squarespace.com/

alicia (lowercase)

Change to this code (I added span tag)

footer .sqs-block-html a {
  background-image: none !important;
  background-repeat: no-repeat !important;
  text-decoration: none !important;
}
/* footer links hover color */
footer.sections a:hover span {
    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
On 12/11/2022 at 7:26 PM, THESC said:

Hi @tuanphan I'm having trouble with a footer that is linked to a folder. It does not expand to show the pages in the folder on hover like it does with the primary navigation links.

Any ideas?? 

Thanks

What is your site url?

On 12/12/2022 at 1:00 PM, authenticeye said:

@tuanphan That worked! ... for that site!   Is it not a universal code?

I tried it on another website but it is not functioning.... how do I use the code for all sites with links in the footer?

This is the other site I added the code to:
https://www.michaelamcgivern.com/

Thank you for your time!

Rei

Use this CSS code

/* footer links hover color */
footer.sections a:hover {
    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

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.