Jump to content

Multilingual website: Adding the language switcher to the main nav bar

Recommended Posts

Site URL: https://lifelab.world/en/home

Hi kind people of Squarespace!

I would need some of your expertise on this matter. I am on a SS 7.0 with brine template. I used this solution in creating a multilingual website https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template

Is there any possible way to move the language switcher along with the nav bar beside the search icon?

I have been finding solutions and codes, but some are not answered and some are in SS 7.1

Please let me know if this is possible. Thank you!

Link to comment
1 hour ago, Naomi-lifelab said:

Site URL: https://lifelab.world/en/home

Hi kind people of Squarespace!

I would need some of your expertise on this matter. I am on a SS 7.0 with brine template. I used this solution in creating a multilingual website https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template

Is there any possible way to move the language switcher along with the nav bar beside the search icon?

I have been finding solutions and codes, but some are not answered and some are in SS 7.1

Please let me know if this is possible. Thank you!

Try adding to Home > Settings > Advanced > Code Injection, choose footer

<script>
  (function(){
    window.addEventListener('DOMContentLoaded', () => {
      const switchBtn = document.querySelector('.language');
      if(switchBtn) {
        const switchBtnDes = switchBtn.cloneNode(true);
        switchBtnDes.classList.add('language-desktop');
        document.querySelector('.Header-search').insertAdjacentElement('beforeBegin',switchBtnDes)
      }
    });
  })()
</script>

<style>
  .language:not(.language-desktop) {
    display: none;
  }

  .language.language-desktop {
    position: static;
    order: 5;
  }
</style>

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

My testing

image.thumb.png.448108e511edee7ad8631a30fb19d962.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 2/17/2022 at 9:08 PM, Naomi-lifelab said:

Hi bangank36,
Unfortunately, I lost the switcher when I applied the script. 😞

 

Lost switcher.png

Have you added and saved my script? I can not find it

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 2/18/2022 at 11:16 PM, bangank36 said:

Have you added and saved my script? I can not find it

Hi @bangank36

As of the moment I removed the script, as the website is live and visitors might not be able to see the language switcher when the script provided is saved. 😞

Is there anything I can do? Will you suggest for me to save the script for the meantime for you to check?

Please let me know.

Thank you so much!

Link to comment

I'll Pm you for checking this issue

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 1 year later...

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.