Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Multilingual website with second nav


loraine

Question

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 post
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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-l

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

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 hom

Posted Images

8 answers to this question

Recommended Posts

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

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include. Pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect. Links in my posts may refer to SF Digital products or may be affiliate links.  Squarespace. I've been a loyal supporter of the platform since 2007. 

Link to post
  • 0

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.

Link to post
  • 0

I tried the nth-child method but unfortunately it doesn't work completely. 
It also hides the language selectors in the top second nav…

Bildschirmfoto 2021-05-11 um 11.30.02.png

Link to post
  • 0
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 post
  • 0
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  ⬇️

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include. Pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect. Links in my posts may refer to SF Digital products or may be affiliate links.  Squarespace. I've been a loyal supporter of the platform since 2007. 

Link to post
  • 0
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 post
  • 0
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

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include. Pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect. Links in my posts may refer to SF Digital products or may be affiliate links.  Squarespace. I've been a loyal supporter of the platform since 2007. 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...