Jump to content

Nav links padding and Social Icon hover

Go to solution Solved by tuanphan,

Recommended Posts

Hello! I need some help with two things.

1. I have a split navigation and I'm trying to adjust the padding of the nav links to be more inline with the middle of the logo. I tried adjusting the line height in the site style menu, but it didn't really give me the control I'm looking for.

2. I have my social icons in the footer. The default hover effect is to have the links at full opacity and when hovered over, the icon decreases in opacity. I would like to switch that and have all the icons at a slightly lower opacity and when hovered over the icon will go to full opacity. I hope that makes sense 🫤

Link to comment
  • Solution

Add this to Design > Custom CSS

/* Footer Social Icons */
footer.sections .sqs-svg-icon--wrapper {
    opacity: 0.8 !important;
footer.sections .sqs-svg-icon--wrapper:hover {
    opacity: 1 !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
  • 1 month 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.