Hide Social Icon Links in Certain Sections

1 hour ago, lulu.lindberg said:

Site URL: https://fennel-hawk-fwg3.squarespace.com/services

https://fennel-hawk-fwg3.squarespace.com/services Password: tails2021

On this page, I have social links in the banners that say "Ontario" and "Alberta". These are two different branches of business with separate social accounts. I want to be able to hide the irrelevant social icons in each banner (so for Ontario, the last three should be hidden. For Alberta, the first three should be hidden.)

 

Any help would be greatly appreciated! Thanks in advance.

You can add to Home > Design > Custom Css

/*Display social icon for Ontario*/
section[data-section-id="617aeb94ea317421e526d6a0"] {
	.socialaccountlinks-v2-block {
		a {
			&:last-child {
				display: none;
			}
			&:nth-child(5) {
				display: none;
			}
			&:nth-child(4) {
				display: none;
			}
		}
	}
}
/*Display social icon for Alberta*/
section[data-section-id="617b0a9ccfc6cd38e68acb90"] {
	.socialaccountlinks-v2-block {
		a {
			&:first-child {
				display: none;
			}
			&:nth-child(2) {
				display: none;
			}
			&:nth-child(3) {
				display: none;
			}
		}
	}
}

Let me know if it works properly on your site

Support me by pressing 👍 if this useful for you