Jump to content

change color on navigation in bi-langual site

Go to solution Solved by paul2009,

Recommended Posts

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 by arie
Link to comment
  • arie changed the title to change color on navigation in bi-langual site

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 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

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 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

Thanks Ziggy, but it is not working. I have made the language switcher another way. See screenshot of pages.

image.png.c12bdba98e3a54a550041102a8b37950.png

When I use this code:  

nav.header-nav-list>div:nth-child(4) a {

    color: red;

}

 

I get this: 

image.thumb.png.deecaab335867d4b29ef81b414495813.png

Which is good. But then on the other language I get this:

image.thumb.png.d183379297c08f01295e413e63cfc5ac.png

Which is not good. 🙂

Any thoughts? Thanks

Link to comment

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 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

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 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

I'm very confused! I count as the 4th and 8th:

image.png.11c5f866acfc605703124ce4dd334f3e.png

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 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment
  • Solution
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 by paul2009

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 3 weeks later...
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 me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.