noblescott 37 Posted October 28 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. Share this post Link to post
tuanphan 6,115 Posted October 28 You can use CSS to do that. But you should share page url first. Send me a message if you have any questions | View my service if you need more support View 4200+ Custom Code for Squarespace How to Setup Password & Share Site URL How to find Page ID Squarespace 7.1 CSS List Share this post Link to post
noblescott 37 Posted October 29 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. Share this post Link to post
tuanphan 6,115 Posted October 29 @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 1 noblescott reacted to this Send me a message if you have any questions | View my service if you need more support View 4200+ Custom Code for Squarespace How to Setup Password & Share Site URL How to find Page ID Squarespace 7.1 CSS List Share this post Link to post
noblescott 37 Posted October 29 Brilliant! Worked a treat, as does "first-child", so that's perfect! Thanks @tuanphan. Share this post Link to post
tuanphan 6,115 Posted October 29 (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 by tuanphan 1 noblescott reacted to this Send me a message if you have any questions | View my service if you need more support View 4200+ Custom Code for Squarespace How to Setup Password & Share Site URL How to find Page ID Squarespace 7.1 CSS List Share this post Link to post
noblescott 37 Posted October 29 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. Share this post Link to post
tuanphan 6,115 Posted October 29 (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 by tuanphan 1 noblescott reacted to this Send me a message if you have any questions | View my service if you need more support View 4200+ Custom Code for Squarespace How to Setup Password & Share Site URL How to find Page ID Squarespace 7.1 CSS List Share this post Link to post
noblescott 37 Posted October 29 Fantastic. Works perfectly yet again. Thanks for taking the time @tuanphan. Appreciate it. S 1 tuanphan reacted to this Share this post Link to post
LucyBrookes 0 Posted Thursday at 10:14 AM (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 Thursday at 10:20 AM by LucyBrookes Share this post Link to post
tuanphan 6,115 Posted Thursday at 10:37 AM 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? Send me a message if you have any questions | View my service if you need more support View 4200+ Custom Code for Squarespace How to Setup Password & Share Site URL How to find Page ID Squarespace 7.1 CSS List Share this post Link to post
LucyBrookes 0 Posted Thursday at 10:46 AM 8 minutes ago, tuanphan said: Footer need different code. Can you share link to your site? sure can. I'll dm you Share this post Link to post