Jump to content

Customizing a social link icon in header

Recommended Posts

Site URL: https://celery-dodecahedron-pa4f.squarespace.com/

Hello. I have received a lot of great help on this forum and am hoping to find an answer to the following question.

We are on Squarespace 7.0 and we have social link icons in our header. I am looking to customize the final social link icon in our header, which is currently linked to our Spanish version of the website and whose icon currently therefore shows a link. 

It would be fantastic to be able to customize just that one final social link icon to be a larger box of the opposite color and the text ESP within it. Or, be able to add an image to that final social link icon, where I could then upload a custom created image of "ESP" (while also making that final social link icon bigger than the other 3 icons). Is this possible with code?

Any help would be really appreciated.

Site: https://celery-dodecahedron-pa4f.squarespace.com/

Password: Xolbe

Link to comment

Add to Design > Custom CSS

nav a.SocialLinks-link.url[href*="maiagt.org"] {
    width: 50px;
    height: 40px;
    background-image: url(https://cdn.pixabay.com/photo/2022/05/24/04/38/study-7217599__480.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
nav a.SocialLinks-link.url[href*="maiagt.org"] svg {
    display: none;
}

 

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

Wow, @tuanphan this is fantastic, you as always are such as huge help. Could I ask you one more question? We also have our social media icons in our footer and I would like to remove this fourth and final social icon so that it does not appear in the footer. Would you be able to assist with this?

Link to comment
11 hours ago, MAIAgt said:

Wow, @tuanphan this is fantastic, you as always are such as huge help. Could I ask you one more question? We also have our social media icons in our footer and I would like to remove this fourth and final social icon so that it does not appear in the footer. Would you be able to assist with this?

You mean remove Link Icon? For all pages?

image.png.8e4b9dbcce7e8e5708f8c82d9e70ddaf.png

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.