Skip to main content

Change colors of social icons to original brand colors

Add to advanced theme editor css (for internal classic pages) 

/* Internal pages social icons (in-page header block) */

/* YouTube (1st icon) */
p.social-header-streamline .social-follow-link:nth-of-type(1) a svg path{
  fill:#eb0000 !important;
}

/* Instagram (2nd icon) */
p.social-header-streamline .social-follow-link:nth-of-type(2) a svg path{
  fill:#dc2e68 !important;
}

/* X / Twitter (3rd icon) */
p.social-header-streamline .social-follow-link:nth-of-type(3) a svg path{
  fill:#000000 !important;
}

/* Facebook (4th icon) */
p.social-header-streamline .social-follow-link:nth-of-type(4) a svg path{
  fill:#1f73e0 !important;
}
 

add to advanced preferences 

<style>

/* YouTube (1st icon) */
.amplify-header .container nav .secondary-container .social-media a:nth-of-type(1) svg path{
  fill:#eb0000 !important;
}

/* Instagram (2nd icon) */
.amplify-header .container nav .secondary-container .social-media a:nth-of-type(2) svg path{
  fill:#dc2e68!important;
}

/* X / Twitter (3rd icon) */
.amplify-header .container nav .secondary-container .social-media a:nth-of-type(3) svg path{
  fill:#000000 !important;
}

/* Facebook (4th icon) */
.amplify-header .container nav .secondary-container .social-media a:nth-of-type(4) svg path{
  fill:#1f73e0 !important;
}

</style>