Placing a coded language switcher in the header nav bar

Hey folks,

I am trying to set up a bilingual 7.1 website in English and German (bieleit-medicus.com) and used the Brad Good method to do so. The code he provides places the language switcher above the header which looks a bit arbitrary and seems to collide in weird ways with a loading animation of @WillMyers that I use.

So I wondered if anyone could help me with the code to place the language switcher in line with the header navigation, where it would be if I used the Weglot extension provided by Squarespace. Thanks for any help in advance!

The code below is one I found in another post. But it seems that it was desgined for 7.0 and makes the language switch disappear for me:

Quote

 

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

 

On 12/29/2022 at 10:43 AM, tuanphan said:

#1. Add to Design > Custom CSS

span.current-language-name {
    border-bottom: 1px solid;
}

#2. I don't know this

#3. What should it look like?

Hey @tuanphan,

do you maybe also know how to underline the current language for a coded language switch (Brad Good method) that isn't in the nav bar?

site: bieleit-medicus.com

Thanks lots!

Best,

Nikolas

works perfectly for me, thanks lots! 🙂

oh I realize that I asked the underlining question under the wrong topic. Intended to respond to a post on that subject. Sorry for the confusion everyone. If anybody finds a solution to the nav bar placement of the switcher, let me know ^^