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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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.