noblescott Posted October 28, 2019 Share Posted October 28, 2019 Hi guys. Hoping someone can help here. I have a site where I've added a social block. Without going into too much detail why, I need to have 2 different Facebook links but only show one or the other on certain pages. Does anyone know the CSS required to hide either first or last one? I have it as Facebook, Twitter, Facebook. Or, if anyone knows another way to do this, that would be great. I thought I could just put a different social block on the different pages but it recognises the existing Connections. Thanks in advance. Link to comment
tuanphan Posted October 28, 2019 Share Posted October 28, 2019 You can use CSS to do that. But you should share page url first. 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
noblescott Posted October 29, 2019 Author Share Posted October 29, 2019 Thanks @tuanphan Page is here...https://peebles-community.squarespace.com/pct and password is community. It's the social icons you can see under the banner. I'm just not sure what CSS to use to hide the different icons in the main the last one (which I want to hide on this page) and the first one (which will be hidden on another page), so any help is appreciated. Thanks in advance. Link to comment
tuanphan Posted October 29, 2019 Share Posted October 29, 2019 @noblescott Add to Home > Design > Custom CSS /* hide last icon */ body#collection-5d80b6e6c70a192412ac1abb nav.sqs-svg-icon--list a:last-child { display: none; } body#collection....bb is PCT Page ID noblescott 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
noblescott Posted October 29, 2019 Author Share Posted October 29, 2019 Brilliant! Worked a treat, as does "first-child", so that's perfect! Thanks @tuanphan. Link to comment
tuanphan Posted October 29, 2019 Share Posted October 29, 2019 (edited) @noblescott first-child last-child nth-child(1), nth-child(2),.. nth-child(2n+1), nth-child(3n+5),.. (n = 0, 1, 2,3 ,4,5,6..) Edited October 29, 2019 by tuanphan noblescott 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
noblescott Posted October 29, 2019 Author Share Posted October 29, 2019 Hi again @tuanphan. Sorry to ask another question but it's kind of related. In mobile view I'm trying to hide the secondary navigation elements and using the method you used above I can't seem to target the relevant children, ie 9, 10, 11 and 12. I managed to test it out with the primary nave elements and it hides them. Do I somehow need to target that this is secondary nav in the CSS somehow? In Google Developer mode it all seems to be lumped in together, ie .Mobile-overlay-nav-item. Thanks again for your help. Link to comment
tuanphan Posted October 29, 2019 Share Posted October 29, 2019 (edited) @noblescott home item is .Mobile-overlay-nav--secondary button with other items, you can also use .Mobile-overlay-nav--secondary .Mobile-overlay-nav-item[href="/projects-1"] .Mobile-overlay-nav--secondary .Mobile-overlay-nav-item[href="/community-council-members"] .Mobile-overlay-nav--secondary .Mobile-overlay-nav-item[href="/contact-us-1"] or community item: .Mobile-overlay-nav--secondary .Mobile-overlay-nav-item:nth-child(2) project: .Mobile-overlay-nav--secondary .Mobile-overlay-nav-item:nth-child(3) contact us: .Mobile-overlay-nav--secondary .Mobile-overlay-nav-item:nth-child(4) Edited October 29, 2019 by tuanphan noblescott 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
noblescott Posted October 29, 2019 Author Share Posted October 29, 2019 Fantastic. Works perfectly yet again. Thanks for taking the time @tuanphan. Appreciate it. S tuanphan 1 Link to comment
LucyBrookes Posted December 5, 2019 Share Posted December 5, 2019 (edited) On 10/29/2019 at 7:40 PM, tuanphan said: @noblescott Add to Home > Design > Custom CSS /* hide last icon */ body#collection-5d80b6e6c70a192412ac1abb nav.sqs-svg-icon--list a:last-child { display: none; } body#collection....bb is PCT Page ID does this work in any template? I would like to do the same thing but my buttons are in the footer. thanks! Edited December 5, 2019 by LucyBrookes Link to comment
tuanphan Posted December 5, 2019 Share Posted December 5, 2019 22 minutes ago, LucyBrookes said: does this work in any template? I would like to do the same thing but my buttons are in the footer. thanks! Footer need different code. Can you share link to your site? 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
LucyBrookes Posted December 5, 2019 Share Posted December 5, 2019 8 minutes ago, tuanphan said: Footer need different code. Can you share link to your site? sure can. I'll dm you Link to comment
colehensley Posted January 5, 2020 Share Posted January 5, 2020 @LucyBrookes I have (2) locations that I'm including separate addresses to in my footer. I'd like to include social blocks under each addresses that would link to each locations unique facebook page url. BOTH are included side-by-side in the footer, but I want to add CSS if possible to redirect one link to a different facebook page. Any assistance appreciated!!https://thefatdonkey2020.squarespace.com Link to comment
tuanphan Posted January 5, 2020 Share Posted January 5, 2020 (edited) 7 hours ago, colehensley said: @LucyBrookes I have (2) locations that I'm including separate addresses to in my footer. I'd like to include social blocks under each addresses that would link to each locations unique facebook page url. BOTH are included side-by-side in the footer, but I want to add CSS if possible to redirect one link to a different facebook page. Any assistance appreciated!!https://thefatdonkey2020.squarespace.com Difficult to help without site url Also CSS can't change Link, maybe you need jQuery/JavScript Edited January 5, 2020 by tuanphan 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
Angelo22 Posted April 20, 2020 Share Posted April 20, 2020 @tuanphan Hello, how could I modify this code body#collection-5d80b6e6c70a192412ac1abb nav.sqs-svg-icon--list a:last-child { display: none; } to do the opposite thing? Like displaying ONLY the last or nth-icon? Thank you Link to comment
tuanphan Posted April 21, 2020 Share Posted April 21, 2020 20 hours ago, Angelo22 said: @tuanphan Hello, how could I modify this code body#collection-5d80b6e6c70a192412ac1abb nav.sqs-svg-icon--list a:last-child { display: none; } to do the opposite thing? Like displaying ONLY the last or nth-icon? Thank you Show Only last item body#collection-5d80b6e6c70a192412ac1abb nav.sqs-svg-icon--list a:not(:last-child) { display: none; } Show only nth-icon /* Hide all icons */ body#collection-5d80b6e6c70a192412ac1abb nav.sqs-svg-icon--list a { display: none; } /* Remove - hide nth icon */ body#collection-5d80b6e6c70a192412ac1abb nav.sqs-svg-icon--list a:nth-child(5) { display: block; } 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
Angelo22 Posted April 22, 2020 Share Posted April 22, 2020 @tuanphan Thank you for your answer it worked like charm. Let me be more specific. I am building a music label website and the subpages are the artists so I want to display different social blocks on each page. I have connected them all in Social Links and with your code I decide what to display each time. Can I have multiple chlids inside the brackets? I have many social accounts and I want to avoid using so much code. Or is there any more clever way to do it? Thank you Link to comment
tuanphan Posted April 23, 2020 Share Posted April 23, 2020 (edited) 18 hours ago, Angelo22 said: @tuanphan Thank you for your answer it worked like charm. Let me be more specific. I am building a music label website and the subpages are the artists so I want to display different social blocks on each page. I have connected them all in Social Links and with your code I decide what to display each time. Can I have multiple chlids inside the brackets? I have many social accounts and I want to avoid using so much code. Or is there any more clever way to do it? Thank you You can create Social Blocks code with Code Block. Then in each page, inset above code > and replace social icons url. ✌️ I Solved a smiliar post, searching again.. Edited April 23, 2020 by tuanphan 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
Guest Posted March 15, 2021 Share Posted March 15, 2021 Hi @tuanphan I´ve made a WhatsApp button into social links and would like to add it to almost every page. Anyhow, I don't want the social icons on the footer to change. So how can I hide the other social links except for the WhatsApp one that I created? my page url is https://www.urhopesu.fi Link to comment
tuanphan Posted March 28, 2021 Share Posted March 28, 2021 On 3/15/2021 at 6:01 PM, denssimies said: Hi @tuanphan I´ve made a WhatsApp button into social links and would like to add it to almost every page. Anyhow, I don't want the social icons on the footer to change. So how can I hide the other social links except for the WhatsApp one that I created? my page url is https://www.urhopesu.fi Hi. I don't see Whatsapp in Footer. 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment