Target and customise mobile menu social icons

Hoping someone can help me with the correct CSS for targeting the social icons displayed in the mobile menu so I can show custom icons instead of the 'link' symbol for unsupported social links. I'm using PNGs rather than SVGs, so have had to create different files for each use on the site (different line colours, backgrounds, transparents, etc). I've gone too far down this road to revert to styling one SVG for all use cases on the site.

I've successfully done this for header social icons and for footer icons, but can't figure out how to target mobile menu icons.

Here's a screenshot of what I'm trying to fix:

3 hours ago, joessqsp said:

Hoping someone can help me with the correct CSS for targeting the social icons displayed in the mobile menu so I can show custom icons instead of the 'link' symbol for unsupported social links. I'm using PNGs rather than SVGs, so have had to create different files for each use on the site (different line colours, backgrounds, transparents, etc). I've gone too far down this road to revert to styling one SVG for all use cases on the site.

I've successfully done this for header social icons and for footer icons, but can't figure out how to target mobile menu icons.

Here's a screenshot of what I'm trying to fix:

Can you share your site with the protected password so we can take a look?

48 minutes ago, bangank36 said:

Can you share your site with the protected password so we can take a look?

https://ray-perch-gdcz.squarespace.com/
PW: giveme1clue

12 hours ago, joessqsp said:

https://ray-perch-gdcz.squarespace.com/
PW: giveme1clue

Try the following one

[href*='zwiftpower'] svg {
  visibility: hidden;
}

[href*='strava'] svg {
  visibility: hidden;
}

[href*='zwiftpower']:after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('https://api.iconify.design/bi/power.svg?color=white');
   background-repeat: no-repeat ;
  background-position: center center;
  background-size: contain;
  position: absolute;
  top:0;
} 


[href*='strava']:after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('https://api.iconify.design/ic/baseline-wind-power.svg?color=white');
   background-repeat: no-repeat ;
  background-position: center center;
  background-size: contain;
  position: absolute;
  top:0;
} 

/*Mobile*/
.header--menu-open [href*='zwiftpower']:after {
  background-image: url('https://api.iconify.design/bi/power.svg');
}

.header--menu-open [href*='strava']:after {
  background-image: url('https://api.iconify.design/ic/baseline-wind-power.svg');
}

Let me know how it works on your site

On 3/1/2022 at 2:57 AM, bangank36 said:

Try the following one

[href*='zwiftpower'] svg {
  visibility: hidden;
}

[href*='strava'] svg {
  visibility: hidden;
}

[href*='zwiftpower']:after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('https://api.iconify.design/bi/power.svg?color=white');
   background-repeat: no-repeat ;
  background-position: center center;
  background-size: contain;
  position: absolute;
  top:0;
} 


[href*='strava']:after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('https://api.iconify.design/ic/baseline-wind-power.svg?color=white');
   background-repeat: no-repeat ;
  background-position: center center;
  background-size: contain;
  position: absolute;
  top:0;
} 

/*Mobile*/
.header--menu-open [href*='zwiftpower']:after {
  background-image: url('https://api.iconify.design/bi/power.svg');
}

.header--menu-open [href*='strava']:after {
  background-image: url('https://api.iconify.design/ic/baseline-wind-power.svg');
}

Let me know how it works on your site

It works perfectly! Thank you.

I've now created my own SVG files for these icons, and have worked out how to save them to the file manager in Squarespace. My question is how do i find the full URL of my SVG, so I can place it in the CSS instead of the iconify icon?!

On 3/1/2022 at 2:57 AM, bangank36 said:

Try the following one

[href*='zwiftpower'] svg {
  visibility: hidden;
}

[href*='strava'] svg {
  visibility: hidden;
}

[href*='zwiftpower']:after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('https://api.iconify.design/bi/power.svg?color=white');
   background-repeat: no-repeat ;
  background-position: center center;
  background-size: contain;
  position: absolute;
  top:0;
} 


[href*='strava']:after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('https://api.iconify.design/ic/baseline-wind-power.svg?color=white');
   background-repeat: no-repeat ;
  background-position: center center;
  background-size: contain;
  position: absolute;
  top:0;
} 

/*Mobile*/
.header--menu-open [href*='zwiftpower']:after {
  background-image: url('https://api.iconify.design/bi/power.svg');
}

.header--menu-open [href*='strava']:after {
  background-image: url('https://api.iconify.design/ic/baseline-wind-power.svg');
}

Let me know how it works on your site

Hello again, thank you for your help with this so far. I am almost there.

All I need to do now is work out why ?colour=white is not styling my SVGs.
I need the header and footer icons to display in white, and the mobile menu to display in black (which it is correctly doing as my SVGs are black-fill by default - so nothing needed there).

12 hours ago, joessqsp said:

Hello again, thank you for your help with this so far. I am almost there.

All I need to do now is work out why ?colour=white is not styling my SVGs.
I need the header and footer icons to display in white, and the mobile menu to display in black (which it is correctly doing as my SVGs are black-fill by default - so nothing needed there).

Don't remove any code in your current code

Add to Design > Custom CSS

/* desktop header white icons */
.header-actions.header-actions--right a.icon:nth-child(n+3) {
    filter: invert(1);
}

On 3/14/2022 at 10:13 PM, tuanphan said:

Don't remove any code in your current code

Add to Design > Custom CSS

/* desktop header white icons */
.header-actions.header-actions--right a.icon:nth-child(n+3) {
    filter: invert(1);
}

 

Thanks so much! That works perfectly. Can you help me identify the class I need to target to style the footer icons the same way please?!

On 3/17/2022 at 9:20 AM, joessqsp said:

Thanks so much! That works perfectly. Can you help me identify the class I need to target to style the footer icons the same way please?!

Add this CSS

/* Footer icons */
footer.sections [href*="strava.com"] {
    filter: invert(1);
}
footer.sections [href*="zwiftpower.com"] {
    filter: invert(1);
}

On 3/19/2022 at 8:13 PM, tuanphan said:

Add this CSS

/* Footer icons */
footer.sections [href*="strava.com"] {
    filter: invert(1);
}
footer.sections [href*="zwiftpower.com"] {
    filter: invert(1);
}

 

Amazing, thank you! Works perfectly. Thanks so much for your help.