In this post, I will share step by step guide to create Multilingual site with 2 languages on Squarespace Personal Plan (you can also use it on any plans, but it is not a good way for Business Plan or higher).

• If the code doesn’t work, send me a message with link to your site, I will help

If you have problem when following the guide, you can send me a message, I will help you install.

Requirements: Site has under 9 pages.

Installing includes:

• 2 or 3 languages with Language Switcher (Buttons, Flags or Dropdown)
• Change footer/logo/site title links/contact form/.., suitable for each language (*)
• Match pages between languages. For example, if you are at About Page, click on French Flag, the browser will go to About (Frech) Page. (*)

Time: ~1 hour

 

1. Create Pages

Suppose we need to create 2 languages: English and Vietnamese, with the following pages

• Home – Trang chu
• About – Gioi thieu
• Service – Dich vu
• Contact – Lien he

and language switch button

Remember:

+ Create pages in alternating order

+ Note the order of the language switch buttons (as opposed to the order of the pages)

+ Page Slug: use whatever you like! Does not require the use of prefix /vi, /en …

You will have navigation like this

2. Different Navigation

In this step, we will use the code to hide English Navigation Items on Vietnamese Pages, and Vietnamese Navigation Items on English Pages.

First, edit All English Pages > Insert Code Block > Paste below code hide Vietnamese Navigation Items on English Pages.

<style>
.header-nav-list>.header-nav-item:nth-child(even) {
    display: none;
}
[data-folder="root"]>div:first-child>div:first-child>div:nth-child(even) {
    display: none;
}
</style>

 

You will have this

Second, add this code to Code Block on All Vietnamese Pages to hide English Items

<style>
.header-nav-list>.header-nav-item:nth-child(odd) {
    display: none;
}
[data-folder="root"]>div:first-child>div:first-child>div:nth-child(odd) {
    display: none;
}
</style>

 

You will have

Each template will need a different code. Above is the code for Squarespace 7.1

Squarespace 7.1 includes: Novo, Pazari, Nolan, Utica, Cami, Matsuya, Nevins, Kester, Gates, Zion, Classon, Hawley, Suhama, Elliott, Otto, Tepito, Balboa, Beaumont, Quincy, Talva, Minetta, Falodu, Hester, Crosby, Ventura, Maru, Tresoire, Almar, Alameda, Patil, Stanton, Paloma, Fillmore, Palmera, Souto, Brower, Merida, Grove, Harman, Rivoli, Noll, Bergen, Degraw, Corrigan, Sackett, Lakshi, Pulaski, Suhama, Cailles, Colima, Barbosa, Clune, Irving, Suffolk, Clarkson, Lusaka, Bailard, Malone, Roseti, Euclid, Carmine, Wycoff, Harbor, Ocotillo, Fayette, Roseti, Dario, Soria, Morena, Rey, Lenoix, Bleecker, Vandam, Cruz, Kitui, Waverly, Vance, Orina, Chotto, Auburn, Juniper, Palmer, Atlantic, Iduma, Pine, Eldridge, Pulsaki, Amal, Suhama, Hart, Carroll, Noll, Hidano, Palermo, Cailles, Archer, Kearny, Sellwood, Essex, Mason, Gramercy Studio, Cole, Devoe, Randi, Zorayda, Manor Studios, Grant, Toledo, Hoyd, Troutman, Tantillo, Maqueda, Hemlock, Bogart, Florence

Here are all popular templates.

Avenue

<style>
#topNav ul>li:nth-child(even) {
display: none;
}
.mobileNav ul>li:nth-child(even) {
display: none;
}
</style>

and

<style>
#topNav ul>li:nth-child(odd) {
display: none;
}
.mobileNav ul>li:nth-child(odd) {
display: none;
}
</style>

Aviator

<style>
nav#main-navigation ul>li:nth-child(even) {
display: none;
}
nav#mobile-navigation ul>li:nth-child(even) {
display: none;
}
</style>

and

<style>
nav#main-navigation ul>li:nth-child(odd) {
display: none;
}
nav#mobile-navigation ul>li:nth-child(odd) {
display: none;
}
</style>

Bedford Template Family

Include: Anya, Bedford, Bryant, Hayden, Bedford

<style>
nav#mainNavigation>div:nth-child(even) {
display: none;
}
nav#mobileNavigation>div:nth-child(even) {
display: none;
}
</style>

and

<style>
nav#mainNavigation>div:nth-child(odd) {
display: none;
}
nav#mobileNavigation>div:nth-child(odd) {
display: none;
}
</style>

Brine Template Family

Include: Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Custom Template, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West, Brine.

<style>
.Header-nav-inner>.Header-nav-item:nth-child(odd) {
display: none;
}
.Mobile-overlay-nav>.Mobile-overlay-nav-item:nth-child(odd) {
display: none;
}
</style>

and

<style>
.Header-nav-inner>.Header-nav-item:nth-child(even) {
display: none;
}
.Mobile-overlay-nav>.Mobile-overlay-nav-item:nth-child(even) {
display: none;
}
</style>

Farro

Include: Farro, Haute

Same as Brine Template

Five

Use this

<style>
nav#main-navigation ul>li:nth-child(even) {
display: none;
}
nav#mobile-navigation ul>li:nth-child(even) {
display: none;
}
</style>

and

<style>
nav#main-navigation ul>li:nth-child(odd) {
display: none;
}
nav#mobile-navigation ul>li:nth-child(odd) {
display: none;
}
</style>

Flatiron

<style>
ul#nav>li:nth-child(even) {
display: none;
}
nav#mobile-navigation ul>li:nth-child(even) {
display: none;
}
</style>

and

<style>
ul#nav>li:nth-child(odd) {
display: none;
}
nav#mobile-navigation ul>li:nth-child(odd) {
display: none;
}
</style>

Galapagos

<style>
.nav-list>li:nth-child(even) {
display: none;
}
</style>

and

<style>
.nav-list>li:nth-child(odd) {
display: none;
}
</style>

Ishimoto

<style>
ul#nav>li:nth-child(even) {
display: none;
}
</style>

and

<style>
ul#nav>li:nth-child(odd) {
display: none;
}
</style>

Momentum

<style>
.main-nav ul>li:nth-child(even) {
display: none;
}
nav#mobile-navigation ul>li:nth-child(even) {
display: none;
}
</style>

and

<style>
.main-nav ul>li:nth-child(odd) {
display: none;
}
nav#mobile-navigation ul>li:nth-child(odd) {
display: none;
}
</style>

Montauk Template Family

Include: Julia, Kent, Montauk, OM

<style>
div#topNav ul>li:nth-child(even) {
display: none;
}
nav.main-nav.mobileNav ul>li:nth-child(even) {
display: none;
}
</style>

and

<style>
div#topNav ul>li:nth-child(odd) {
display: none;
}
nav.main-nav.mobileNav ul>li:nth-child(odd) {
display: none;
}
</style>

Native

<style>
.main-nav ul>li:nth-child(even) {
display: none;
}
</style>

and

<style>
.main-nav ul>li:nth-child(odd) {
display: none;
}
</style>

Pacific Template Family

Include:  Bryler, Charlotte, Fulton, Horizon, Naomi, Pacific

<style>
nav#mainNavigation>div:nth-child(even) {
display: none;
}
nav#mobileNavigation>div:nth-child(even) {
display: none;
}
</style>

and

<style>
nav#mainNavigation>div:nth-child(odd) {
display: none;
}
nav#mobileNavigation>div:nth-child(odd) {
display: none;
}
</style>

Skye Template Family

Include: Foundry, Indigo, Ready, Skye, Tudor

<style>
nav#mainNavigation>div:nth-child(even) {
display: none;
}
</style>

and

<style>
nav#mainNavigation>div:nth-child(odd) {
display: none;
}
</style>

Supply

<style>
.navigation-secondary ul>li:nth-child(even) {
display: none;
}
</style>

and

<style>
.navigation-secondary ul>li:nth-child(odd) {
display: none;
}
</style>

Tremont Template Family

Include: Camino, Carson, Henson, Tremont

<style>
nav#mainNavigation>div:nth-child(even) {
display: none;
}
</style>

and

<style>
nav#mainNavigation>div:nth-child(odd) {
display: none;
}
</style>

Wells

<style>
nav#secondaryNavigation ul>li:nth-child(even) {
display: none;
}
nav.main-nav.mobile-nav ul>li:nth-child(even) {
display: none;
}
</style>

and

<style>
nav#secondaryNavigation ul>li:nth-child(odd) {
display: none;
}
nav.main-nav.mobile-nav ul>li:nth-child(odd) {
display: none;
}
</style>

Wexley

<style>
div#topNav ul>li:nth-child(even) {
display: none;
}
nav.main-nav.mobile-nav ul>li:nth-child(even) {
display: none;
}
</style>

and

<style>
div#topNav ul>li:nth-child(odd) {
display: none;
}
nav.main-nav.mobile-nav ul>li:nth-child(odd) {
display: none;
}
</style>

3. Remove a page from Navigation

If you delete a page from the Main Navigation, the order of the items will change and the code will no longer work.
So how to hide a page without affecting the code?

First, each page in Main Navigation will have an order number, from top to bottom.

Next, add this to Website Tools > Custom CSS. Replace number 2 with the corresponding page number

Squarespace 7.1

.header-nav-list>.header-nav-item:nth-child(2) {
    display: none;
}
[data-folder="root"]>div:first-child>div:first-child>div:nth-child(2) {
    display: none;
}

 

Avenue

#topNav ul>li:nth-child(2) {
display: none;
}
.mobileNav ul>li:nth-child(2) {
display: none;
}

Aviator

nav#main-navigation ul>li:nth-child(2) {
display: none;
}
nav#mobile-navigation ul>li:nth-child(2) {
display: none;
}

Bedford

nav#mainNavigation>div:nth-child(2) {
display: none;
}
nav#mobileNavigation>div:nth-child(2) {
display: none;
}

Brine, Farro

.Header-nav-inner>.Header-nav-item:nth-child(2) {
display: none;
}
.Mobile-overlay-nav>.Mobile-overlay-nav-item:nth-child(2) {
display: none;
}

Five

nav#main-navigation ul>li:nth-child(2) {
display: none;
}
nav#mobile-navigation ul>li:nth-child(2) {
display: none;
}

Flatiron

<style>
ul#nav>li:nth-child(2) {
display: none;
}
nav#mobile-navigation ul>li:nth-child(2) {
display: none;
}

Galapagos

.nav-list>li:nth-child(2) {
display: none;
}

Ishimoto

ul#nav>li:nth-child(2) {
display: none;
}

Momentum

.main-nav ul>li:nth-child(2) {
display: none;
}
nav#mobile-navigation ul>li:nth-child(2) {
display: none;
}

Montauk

div#topNav ul>li:nth-child(2) {
display: none;
}
nav.main-nav.mobileNav ul>li:nth-child(2) {
display: none;
}

Native

.main-nav ul>li:nth-child(2) {
display: none;
}

Pacific

nav#mainNavigation>div:nth-child(2) {
display: none;
}
nav#mobileNavigation>div:nth-child(2) {
display: none;
}

Skye

nav#mainNavigation>div:nth-child(2) {
display: none;
}

Supply

.navigation-secondary ul>li:nth-child(2) {
display: none;
}

Tremont

nav#mainNavigation>div:nth-child(2) {
display: none;
}

Wells

nav#secondaryNavigation ul>li:nth-child(2) {
display: none;
}
nav.main-nav.mobile-nav ul>li:nth-child(2) {
display: none;
}

Wexley

div#topNav ul>li:nth-child(2) {
display: none;
}
nav.main-nav.mobile-nav ul>li:nth-child(2) {
display: none;
}

 

4. FAQ

Code only works when refreshing the website?

Disable Ajax Loading. If you don’t know how to, Google: “disable ajax squarespace” or contact Squarespace Custom Care.

How to change Logo Link?

You need Business Plan or higher to do this. Send me a message with your site url. I will give the code.

How to create Footer on each language

Create 2 sections in Footer then send me a message with site url. I will check & give the code.