CSS Solution For Bilingual Squarespace Websites

When Karen Serre approached me about creating an English/Italian website I told her that I had never done a bilingual structure before but that I was very interested in researching how to do this in Squarespace. She gave me an example site, www.art-events.it, which incidentally used the same template she liked: Bedford. My first step was to contact the designer of this website to see whether he was willing to share his method. He said he was but then he never got back to me again. 

So I started investigating the Squarespace forums and came across various posts on the subject of hiding navigation items using the NTH-CHILD method. That made sense but the coding solutions suggested didn’t quite work with my navigation which also contained folders and sub-pages.

Now, it was important to me to find a pure CSS solution as I am not using Developer. And after some trial and error I finally came across this article and that did the trick!

How I did it

This will work with all templates in the Bedford family. It may also work with other templates but you may need to tweak the code a bit as class names may be different.

  • First I created all the English pages and sub-pages and then copied everything for the Italian version. My client could then go straight into the pre-formatted pages and translate everything right there and then.
  • In the Page Menu I listed all the English pages first and then the Italian ones in the same order.
  • Once the pages were in place I proceeded to write the CSS code that would hide the Italian pages in the English navigation and vice versa. I had never used the NTH-CHILD method before and let me tell you, my mind was boggling! The problem I ran into were the folders and sub-pages because the NTH-CHILD code I was using also affected the sub-pages in the navigation which I didn’t want. I finally came across the solution in this article.
  • I located each page collection-ID from the source code and copied the CSS code for every single page. There is one NTH-CHILD equation for all English pages and another for all Italian pages. You will need to calculate your own NTH-Child based on the number of pages you have. You can find the code at the bottom of this post. Yes, it’s a lot of work which is why it was very important that my client and I agreed on the page structure before doing this. 
  • The border code is for the language link on the navigation bar so to highlight it in keeping with Bedford’s style.
  • I also applied the code to the mobile navigation.
  • Scroll to the bottom of this page for the code.
  • To view a live website where I implemented this bi-lingual structure click here.

Other templates

You may also want to check out these posts by other Squarespace web designer who implemented a bi-lingual structure on different templates:

Rally - by Kath O'Malley
Hunter - by Samantha Black


Don't want to DIY it?

You can hire me to set up your bi-lingual structure. This fee includes up to ten pages in each language, additional fees may apply for more pages (but let's talk if it's only a couple). You can book this service right here and I will contact you to schedule the work. And of course you can always email me if you have any questions!

500.00
Add To Cart

CSS CODE

/* BILINGUAL SET-UP ENGLISH */

/* English Welcome Page - Hide Italian Navigation */
.collection-54f4ad72e4b04ab92e1f3be9 #mainNavigation > div:nth-child(n+6),
.collection-54f4ad72e4b04ab92e1f3be9 #mobileNavigation > div:nth-child(n+6) {
  display: none;
}

/* English Welcome Page - Style Language Button */
.collection-54f4ad72e4b04ab92e1f3be9 #mainNavigation > div:nth-child(5),
.collection-54f4ad72e4b04ab92e1f3be9 #mobileNavigation > div:nth-child(5) {
  border: 2px solid #fff;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  padding: 5px;
}

/* BILINGUAL SET-UP ITALIAN */

/* Italian Benvenuto Page - Hide English Navigation */
.collection-5504828ee4b0481afcedc775 #mainNavigation > div:nth-child(-n+5),
.collection-5504828ee4b0481afcedc775 #mobileNavigation > div:nth-child(-n+5) {
  display: none;
}

/* Italian Welcome Page - Style Language Button */
.collection-5504828ee4b0481afcedc775 #mainNavigation > div:nth-child(11),
.collection-5504828ee4b0481afcedc775 #mobileNavigation > div:nth-child(11) {
  border: 2px solid #fff;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  padding: 5px 15px 5px 5px;
}


monitor-600.png

Don't want to DIY it?

I can implement this for you! This service is $500 for a website with up to 10 pages. Contact me & let's talk!