Jump to content

How to edit footer link behavior?

Recommended Posts

I'm trying to make my footer mimic my header. I have tried several different lines of code to edit footer behavior, but nothing has changed. Ideally, I would like for there to be a hover: bold / #0000ff effect. Here's the most recent bit I put into custom CSS:


.footer-sections *:hover {
    color: #0000FF !important;
  font-weight: bold;


Tried footer-nav-lists and another one that I can't remember. I'd also like to change the color of the social links in my footer. Any ideas?

Link to comment

Can you share your website URL? and point out the links you want to have this effect?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

@TiaTiaTia You can try this code snippet to add the hover effects on footer links.

footer a:hover {
	color: #0000FF !important;
	font-weight: bold !important;

Try this code to add hover effects on social links:

.sqs-svg-icon--list {
    a:hover {
        opacity: 1 !important;
    a:hover .sqs-use--icon {
        fill: 0000FF !important;

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

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.