Replacing Social Icons in the Header on Squarespace 7.1

This tutorial will show you how replace social Icons on the Header 7.1 navigation for both mobile and desktop devices.

Complexity: Moderate

---

Step 1

First thing we need to do is upload your icons on to squarespace.

From the Squarespace dashboard navigate to:

Design > Custom CSS and at the bottom click on the 'MANAGE CUSTOM FILES' button and then click on the 'Add image or font' button to upload your icon images.

---

Step 2

The next step would be to copy the code below for the social media icon replacement both desktop and mobile devices

/*Header Social Icons*/
.header-menu-actions-action:nth-of-type(1) {    
  svg { 
    display:none;    
  }    
  background-image: url(URL);    
  background-size: 100%;    
  background-repeat: no-repeat;  
}

@media only screen and (min-width:640px) { 
  .icon--fill:nth-of-type(1) {
    svg {
      display:none;
    }    
    background-image: url(URL);    
    background-size: 100%;    
    background-repeat: no-repeat;  
  } 
}  

---

Step 3

To select only the specific social icon then we can use :nth-of-type(x), which corresponds to the position of the social media icon, starting from the left which given nth-of-type(1).

/*Header Social Icons*/
.header-menu-actions-action:nth-of-type(1) {    
  svg { 
    display:none;    
  }    
  background-image: url(URL);    
  background-size: 100%;    
  background-repeat: no-repeat;  
}

@media only screen and (min-width:640px) { 
  .icon--fill:nth-of-type(1) {
    svg {
      display:none;
    }    
    background-image: url(URL);    
    background-size: 100%;    
    background-repeat: no-repeat;  
  } 
}  

* change the number depending on which icon you want to select 1, 2 ,3 etc.

---

Step 4

Assign social media icon

To do this place your cursor in between () in background-image: url (URL); line.

Delete the URL text

Then click the ‘MANAGE CUSTOM FILES’ to show the icons, lastly click on the icon to be assigned to the link once.

---

Step 5

Repeat steps 3 and 4. below are the code for the remaining social media icons.

/*Header Social Icons*/
.header-menu-actions-action:nth-of-type(2) {    
  svg { 
    display:none;    
  }    
  background-image: url(URL);    
  background-size: 100%;    
  background-repeat: no-repeat;  
}

@media only screen and (min-width:640px) { 
  .icon--fill:nth-of-type(2) {
    svg {
      display:none;
    }    
    background-image: url(URL);    
    background-size: 100%;    
    background-repeat: no-repeat;  
  } 
}  

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ?“AS IS”. Other than as provided this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, you can book our consultation services.