Jump to content

Target and customise mobile menu social icons

Recommended Posts

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:

mobile-menu-icons.png.26fdf2de679ae95f230392598ebb22d5.png

Link to comment
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

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:

mobile-menu-icons.png.26fdf2de679ae95f230392598ebb22d5.png

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
12 hours ago, joessqsp 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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?!

Link to comment
  • 2 weeks later...
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).

Link to comment
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);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?!

Link to comment
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);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.