Gradient Circle Social Media Icons For 7.1

Look Demo

Give the social media icons in navigation and mobile menu a gradient circle style. This plugin uses css editor and works with Squarespace 7.1.

How To Install

From your Squarespace account, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Gradient Social Circle Style //

.header--menu-open .icon, .header-actions-action--social .icon {
  background: linear-gradient(to left, #F07C63, #E45372) !important;
  background-color: #000000 !important;
  padding: 10px;
  border-radius: 50%;
  margin-right: 0px !important;
}

// Icon Color //

.header-actions-action--social .icon--fill svg, .header--menu-open .icon--fill svg  {
  fill: #ffffff !important;
  }

Customize

Gradient Social Circle Style: Change the background, padding, border radius, and margin values to your liking.

Icon Color: You can change the color of the icon itself by switching out the fill color value.

We recommend keeping the background color a darker color under Social Circle Style. This background color is a backup in case the visitors browser doesn’t load the gradient colors.

This plugin will target the social links on both desktop and mobile.

License

This plugin comes with an Unlimited Use License. View License Terms