joessqsp Posted February 27, 2022 Share Posted February 27, 2022 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: Link to comment
Beyondspace Posted February 28, 2022 Share Posted February 28, 2022 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? 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
joessqsp Posted February 28, 2022 Author Share Posted February 28, 2022 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 Link to comment
Beyondspace Posted February 28, 2022 Share Posted February 28, 2022 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 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
joessqsp Posted March 1, 2022 Author Share Posted March 1, 2022 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
joessqsp Posted March 13, 2022 Author Share Posted March 13, 2022 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
tuanphan Posted March 14, 2022 Share Posted March 14, 2022 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
joessqsp Posted March 17, 2022 Author Share Posted March 17, 2022 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
tuanphan Posted March 19, 2022 Share Posted March 19, 2022 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
joessqsp Posted March 21, 2022 Author Share Posted March 21, 2022 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment