Leaflet Social Media Icons For 7.1

Look Demo

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

leafletgreen.png

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.

// Social Leaflet Style //

.header--menu-open .icon, .header-actions-action--social .icon {
  background-color: #78C373 !important;
  padding: 15px;
  border-radius: 0px 20px 0px 20px;
  margin-right: 0px !important;
}

// Icon Color //

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

Customize

Social Leaflet Style: Change the background, padding, and margin values to your liking. Do not change the margin values - this is what gives the icons the leaflet style.

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

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

License

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

Previous
Previous

Remove Site Title or Logo From Mobile Menu

Next
Next

Gradient Circle Social Media Icons For 7.1