arie Posted February 13 Share Posted February 13 (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 by arie Link to comment
Ziggy Posted February 13 Share Posted February 13 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 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
arie Posted February 13 Author Share Posted February 13 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 Share Posted February 13 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 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
arie Posted February 14 Author Share Posted February 14 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 Share Posted February 14 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 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
Ziggy Posted February 14 Share Posted February 14 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 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
arie Posted February 15 Author Share Posted February 15 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 Share Posted February 15 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 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
Solution paul2009 Posted February 15 Solution Share Posted February 15 (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 by paul2009 Ziggy and arie 2 About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
arie Posted February 16 Author Share Posted February 16 Thank you so much @paul2009! This worked perfectly. paul2009 1 Link to comment
paul2009 Posted March 6 Share Posted March 6 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. About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. 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