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

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;
}


Recent Blog Posts