How to Customize the Social Icons in your Squarespace Header & Mobile Menu

global element

Jul 29

By default, the social media icons in your Squarespace header match your navigation links, but that doesn’t mean they have to. 😉 In this tutorial, I’ll show you how to give those icons their own style with a little CSS magic.

You’ll learn how to update the icon color, change the background, adjust the outline if you're using that style, and even make the mobile version totally different. This is a great way to create a more polished, brand-aligned look—without changing your entire header.

👇 Watch the video below to see it in action, then scroll down for all the codes and customizations.

Below are the exact snippets I used in the tutorial, along with a quick explanation of what each one does. You can copy and paste these into your site wide Custom CSS & be sure to udpate the colors to match your brand!

Pro tip: in the video, I was able to reach my site wide CSS from my pages menu by clicking on custom code at the bottom of the pages menu, and then selecting custom CSS. If that option isn’t available for you, press the / key on your keyboard to open the program search and look for CSS so you can navigate their directly.

Let’s start with the header social media icons in your website header:

This code below targets the social icons in your desktop header.

fill changes the color of the icon itself
background-color adds a background behind the icon
box-shadow creates an outline effect for icons using the "outline" style—this is where you control the border color and width

All of these codes have colors that you can change to a web-safe color name (like red, blue, etc) or you can use a color code, like the HEX examples.

/* social icons - desktop */
.header-actions-action--social .icon svg{
  fill:#a1d9dd!important
}
.header-actions-action--social .icon {
  box-shadow: 0px 0px 0px 2px inset #a1d9dd!important
  background:yellow!important
}

Next, let’s adjust the mobile menu icon colors

This code has a similar setup as above, but this one only applies when the mobile menu is open. Super helpful if you want to use a different icon color on mobile!

/* socil icons - mobile */
.mobile .icon--fill svg {
  fill:red!important
}
.mobile .icon {
  background:#e5f5f6;
  box-shadow: 0px 0px 0px 2px inset purple!important
}

Optional: Add a custom hover effect

This code adds a custom hover style to the desktop version only, because there is no cursor on mobile devices to create a hover effect. You can use this code to change both the icon color and background when a user moves their mouse over the icon.

/* social icon - hover */
.header-actions-action--social .icon:hover{
  background:#a1d9dd!important;
}
.header-actions-action--social .icon:hover svg{
  fill:#e5f5f6!important
}