How to change the color of header social icons on a hover

Nov 30

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

This tutorial will teach you how to change the color of the social media icons in the header of your website, specifically on a hover in Squarespace 7.1

Pro Tip: If you don’t see social icons in the header of your website, you can add one!
Hop into edit mode on any page and hover over the header of your site until you see the button that says edit site header. Click on that button and then click on the elements option in the menu that opens. Under elements, toggle on social media icons and then click edit social icons to add any of them that you want to see!

Below is the step by step tutorial for adding this code, and the codes you can copy and paste into your own site.

Here are the codes:
Be sure to change the colors in the codes below to match the color for your own site.

Change the Color of the Header Social Icons:

.header-actions-action--social .icon:hover svg{fill: orange!important}

Change the Background Color of the Header Social Icons:

.header-actions-action--social .icon:hover svg{background: orange!important}

You can combine both codes into one line like this:

.header-actions-action--social .icon:hover svg{fill: #FFF!important; background: orange!important}

→ Why did I use the extra text !important in the code above?

If a browser reads more than one line of code to change an item, it won’t always pick the one you added. When you add the text !important the browser knows to pay attention to your new code.