arie Posted February 13, 2023 Share Posted February 13, 2023 (edited) Hi, I made my site in 2 languages. The language switcher would be nice to have in a different color. I found this https://forum.squarespace.com/topic/193327-changing-color-on-some-navigation-links/ But with minor tweaks I did not manage to get this right, because when I select the 4th link, the wrong navigation gets colored in one language. In the other it works fine. It is because of the script I use to hide certain language pages I guess. Sorry for my bad English :). Any ideas? thanks Edited February 13, 2023 by arie Link to comment
Ziggy Posted February 13, 2023 Share Posted February 13, 2023 Can you share your website URL? What method did you use to create the dual language website? Weglot? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
arie Posted February 13, 2023 Author Share Posted February 13, 2023 Oh sorry for the incompleteness it’s https://www.gallerymakelaars.nl/ I used this method https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template Link to comment
Ziggy Posted February 13, 2023 Share Posted February 13, 2023 Try this custom CSS: a.multilanguage { color:red; } Let me know if that works. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
arie Posted February 14, 2023 Author Share Posted February 14, 2023 Thanks Ziggy, but it is not working. I have made the language switcher another way. See screenshot of pages. When I use this code: nav.header-nav-list>div:nth-child(4) a { color: red; } I get this: Which is good. But then on the other language I get this: Which is not good. 🙂 Any thoughts? Thanks Link to comment
Ziggy Posted February 14, 2023 Share Posted February 14, 2023 Strange, you could try using last-child: nav.header-nav-list>div:last-child a { color: red; } Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
arie Posted February 14, 2023 Author Share Posted February 14, 2023 Thanks, but then I get this: Link to comment
Ziggy Posted February 14, 2023 Share Posted February 14, 2023 Try this then! nav.header-nav-list>div:nth-child(4n) a { color: red; } The 4n selects the 4th, 8th, 12th, 16th..... Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
arie Posted February 15, 2023 Author Share Posted February 15, 2023 No, again the same result: contact is red and english is red. Is there a way to directly target for example the 4th and the 7th? Maybe I can figure out which one it is. If we get this right, I will definitely buy you a coffee Ziggy! ☕ Link to comment
Ziggy Posted February 15, 2023 Share Posted February 15, 2023 I'm very confused! I count as the 4th and 8th: Would you be up for giving me access to the website so I can quickly work on a solution? PM me if you do. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Solution paul2009 Posted February 15, 2023 Solution Share Posted February 15, 2023 (edited) On 2/13/2023 at 4:35 PM, arie said: The language switcher would be nice to have in a different color. I did not manage to get this right, because when I select the 4th link, the wrong navigation gets colored in one language. If you add code that references the "nth" element, it can be difficult to maintain the code, especially when the content is dynamic - in this case due to the language switching. Instead, you can reference the url of those external links, like this: /* Change color of language links */ .header-nav-item.header-nav-item--external a[href="/english"], .header-nav-item.header-nav-item--external a[href="/en/nederlands"], { color: red; } This will only affect the desktop navigation. If you want to set an alternative colour for the mobile navigation, you'll want to add some CSS for this too. For example: /* Language links on mobile nav */ .header-menu .header-menu-nav a[href="/english"], .header-menu .header-menu-nav a[href="/en/nederlands"] { color: white!important; } Did this help? Please give feedback by clicking an icon below ⬇️ Edited February 15, 2023 by paul2009 arie and Ziggy 2 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
arie Posted February 16, 2023 Author Share Posted February 16, 2023 Thank you so much @paul2009! This worked perfectly. paul2009 1 Link to comment
amrizo Posted March 6, 2023 Share Posted March 6, 2023 Hi, does this also work on 7.0?? Link to comment
paul2009 Posted March 6, 2023 Share Posted March 6, 2023 21 minutes ago, amrizo said: does this also work on 7.0?? Unlike v7.1 which has a single template and structure, version 7.0 has many different ones. You’ll need to provide us with a working link to your site for us to check. Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? 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