Jump to content

Multilingual website with second nav

Recommended Posts

Site URL: https://burgundy-orange-xekc.squarespace.com/

Hello!

I'm setting up a website with five language options. Till now I was able to set up a second nav as language selector an i'm using the following code to hide sites from other languages

#header .header-nav-item:nth-child(5) {display:none}

NOW the problem is, that the elements in the second nav and the first five elements in the main nav are counted the same. 

So if I want to hide nth-child(5) it hides the fifth site in the main nav AND the fifth language link in the second nav. But I want the fifth link in the second nav to stay visible. 

Hope it's kinda clear… 

Anyone have any advice?

Thanks in advance!!

pw: incler

Link to comment

You can add items follow these orders

  • language 1 
  • language 2
  • language 3
  • language 4
  • language 5 
  • language 1
  • language 2
  • ...

To hide language 2, 3, 4, 5 on Language 1 Pages, add this code to all languages page header

<style>
  .header-nav-item:not(:nth-child(5n+1)) {
    display: none;
}
</style>

to hide languages 3, 4, 5, 6, 1 on Language 2, use this code

<style>
  .header-nav-item:not(:nth-child(5n+2)) {
    display: none;
}
</style>

to hide languages 4, 5, 6, 1, 2 on Language 3 pages, use this

<style>
  .header-nav-item:not(:nth-child(5n+3)) {
    display: none;
}
</style>

...

I have not tested it, just a few quick thoughts in mind. You can try.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 5/5/2021 at 5:52 PM, loraine said:

I'm setting up a website with five language options.  So if I want to hide nth-child(5) it hides the fifth site in the main nav AND the fifth language link in the second nav. But I want the fifth link in the second nav to stay visible. Anyone have any advice?

It will be much easier if you add the language name to the URL of each page, and then use the language name to hide/show the correct navigation links.

Start by changing the url of the English homepage to /en/home and the French homepage from home-fr to /fr/home and so on. Then instead of nth-child, you can select the navigation items by looking at the first part of the url - /fr/, /en/ and so on.

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
On 5/7/2021 at 1:08 PM, paul2009 said:

It will be much easier if you add the language name to the URL of each page, and then use the language name to hide/show the correct navigation links.

Start by changing the url of the English homepage to /en/home and the French homepage from home-fr to /fr/home and so on. Then instead of nth-child, you can select the navigation items by looking at the first part of the url - /fr/, /en/ and so on.

Thanks for this advice! Do you have a sample code for that?

Link to comment
7 minutes ago, loraine said:

Do you have a sample code for that?

Sure.

When you've changed the URLs, you can use some JavaScript to show/hide based on these. Here's a link to an article that Brad wrote which covers one way to do this:

How to setup multi-language content on any Squarespace Template

Note that his solution isn't written in pure JavaScript so it will require you to include the jQuery library. His article was last updated 16 months ago, so it refers to a version of an older version of jQuery that has known security vulnerabilities. Instead of using 3.4.1 in his step 4, you'll therefore want to use 3.6.0 (March 2021):

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfGK" crossorigin="anonymous"></script>

 

If this helps you, please click "Like" below  ⬇️

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
2 hours ago, paul2009 said:

Sure.

When you've changed the URLs, you can use some JavaScript to show/hide based on these. Here's a link to an article that Brad wrote which covers one way to do this:

How to setup multi-language content on any Squarespace Template

Note that his solution isn't written in pure JavaScript so it will require you to include the jQuery library. His article was last updated 16 months ago, so it refers to a version of an older version of jQuery that has known security vulnerabilities. Instead of using 3.4.1 in his step 4, you'll therefore want to use 3.6.0 (March 2021):


<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfGK" crossorigin="anonymous"></script>

 

If this helps you, please click "Like" below  ⬇️

Unfortunately this also doesn't work… 
The language switcher are not visible

Link to comment
3 hours ago, loraine said:

The language switcher are not visible

When I look at the site, it appears to be working (see below).

CSS wasn't being applied to Squarespace 7.1 sites for a few hours today. Perhaps this was the issue?

1284445884_Screenshot2021-05-11at16_28_32.thumb.png.80354ea7b4e9498ec25ff2615b784fbd.png

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
  • 1 year later...

Hi @Lorraine!

I'm Parker and I work on the Customer Operations team at Squarespace. It looks like you were able to get some support with custom code, but I also wanted to let you know that we now offer an integration with Weglot. With Weglot, you can add a language-switcher button to your site's header that will allow folks to switch the language of the content. 

Here's some more on that: 

https://support.squarespace.com/hc/en-us/articles/205809778-Creating-a-multilingual-site-in-Squarespace

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.