[Share] 4 Languages

You can use this simple guide to add 4 languages to site for Personal Plan.

With Business Plan/higher, you can also use this guide, but I think there are many other guides that are better and more concise.

See demo: https://fourlanguages.squarespace.com/?noredirect

Pass: abc

If you can't make it work, you can comment below with site url, I can check easier.

#1. Suppose we need to create 4 languages

• English: Home (EN), About (EN), Inquire (EN), Work (EN)
• France: Home (FR), About (FR), Inquire (FR), Work (FR)
• German: Home (DE), About (DE), Inquire (DE), Work (DE)
• Vietnam: Home (VI), About (VI), Inquire (VI), Work (VI)

You can create 16 pages and a Dropdown then add to Main Navigation

#2. Note

• English: 1, 2, 3, 4
• France: 5, 6, 7, 8
• German: 9, 10, 11, 12
• Vietnam: 13, 14, 15, 16

#3. English

To hide France, German, Vietnam Pages on English Pages, you can edit 4 English Pages > Add a Code Block > Paste this code:

<style>
nav.header-nav-list>div:nth-child(n+5):not(:last-child) {
    display: none;
}
[data-folder="root"]>div>div>div:nth-child(n+5):not(:last-child) {
    display: none;
}
</style>

result

#4. France

To hide English, German, Vietnam Pages on France Pages, you can edit 4 France Pages> Add a Code Block > Paste this code.

<style>
nav.header-nav-list>div, [data-folder="root"]>div>div>div {
    display: none;
}
nav.header-nav-list>div:nth-child(5), nav.header-nav-list>div:nth-child(6), nav.header-nav-list>div:nth-child(7), nav.header-nav-list>div:nth-child(8), nav.header-nav-list>div:last-child{
    display: inline-block !important;
}
[data-folder="root"]>div>div>div:nth-child(5), [data-folder="root"]>div>div>div:nth-child(6), [data-folder="root"]>div>div>div:nth-child(7), [data-folder="root"]>div>div>div:nth-child(8), [data-folder="root"]>div>div>div:last-child  {
    display: inline-block !important;;
}
</style>

result

#5. German

To hide English, France, Vietnam Pages on German Pages, you can edit 4 German Pages> Add a Code Block > Paste this code.

<style>
nav.header-nav-list>div, [data-folder="root"]>div>div>div {
    display: none;
}
nav.header-nav-list>div:nth-child(9), nav.header-nav-list>div:nth-child(10), nav.header-nav-list>div:nth-child(11), nav.header-nav-list>div:nth-child(12), nav.header-nav-list>div:last-child{
    display: inline-block !important;
}
[data-folder="root"]>div>div>div:nth-child(9), [data-folder="root"]>div>div>div:nth-child(10), [data-folder="root"]>div>div>div:nth-child(11), [data-folder="root"]>div>div>div:nth-child(12), [data-folder="root"]>div>div>div:last-child  {
    display: inline-block !important;;
}
</style>

result

#6. Vietnam

To hide English, France, German Pages on Vietnam Pages, you can edit 4 Vietnam Pages> Add a Code Block > Paste this code.

<style>
nav.header-nav-list>div, [data-folder="root"]>div>div>div {
    display: none;
}
nav.header-nav-list>div:nth-child(n+13) {
    display: inline-block !important;
}
[data-folder="root"]>div>div>div:nth-child(n+13) {
    display: inline-block !important;;
}
</style>

result