Language Switch Button Code

Hey there,

I am using 7.1 and my default language is german.

I want a simple and good looking german/english switch option on the home page (i dont want a cover page etc.).

I have injected already a code that makes only the default language main navigation visible and hides the english ones - i have done that by giving each folder and page a "/de/.." or "/en/.." URL slag. The code makes the "en" ones invisible. 

Now i want a code that creates a nice looking language switch somehwere on the top on my website (header etc.).

Right now it looks like that (see attachment) and i cant even click on either on them..and the switch looks very weird and unprofessional.

Please send help! I´m a beginner in coding..:)

HI could you provide your site url to check?

11 hours ago, slowtravelmorocco said:

https://www.slowtravelmorocco.com/

 

does that work?

Do you want it to display as flag image like this

yes, that would be great!!

My header is see through - when I´m scrolling down it should also move with the main navigation and site titel, but I guess it will do that automatically once I have inserted a code, right?

1 hour ago, slowtravelmorocco said:

yes, that would be great!!

My header is see through - when I´m scrolling down it should also move with the main navigation and site titel, but I guess it will do that automatically once I have inserted a code, right?

 

 

It did slightly changes in your current solution, hopes it'll help

<style>
	.language {
	  position: absolute;
	  z-index: 999;
	  top: -20px;
	  left: 0;
	  display: inline-block;
	}
	.language a {
	  border: 1px solid #000;
	  margin: 0 5px;
	  width: 40px;
	  height: 20px;
	  display: inline-block;
	  background-position: center top;
	  float: left;
	  text-indent: -999999px;
	  color: transparent;
	}
	.language [href="/en/home/"] {
	  background: url(https://restcountries.eu/data/gbr.svg) no-repeat;
	  background-size: cover;  
	}

	.language [href="/de/home"] {
	  background: url(https://restcountries.eu/data/deu.svg) no-repeat;
	  background-size: cover;
	  width: 33px
	}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() { 
  /* SETUP MULTI-LANGUAGE */
  var defaultLanguage = 'de';
  var lang = location.pathname.split("/")[1];
  var defaultClass = 'lang-'+defaultLanguage+'';
  var itemParent = "nav [class*='collection'],nav [class*='folder'],nav [class*='index'],nav [class*='group']";
  if (lang == "" || lang.length > 2 ){
    var lang = defaultLanguage;
  }

  /* ADD LANGUAGE CLASSES */
  $('a[href="/"]').addClass('lang-'+defaultLanguage+'').parents(itemParent).addClass('lang-'+defaultLanguage+'');
  $('nav a:link:not([href^="http://"]):not([href^="https://"])').each(function () {
    var langType = $(this).attr('href').split("/")[1];
    var multiLanguageClass = 'multilanguage lang-' + langType + '';
    if (undefined !== langType && langType.length <= 2) 
      $(this).addClass(multiLanguageClass).parents(itemParent).addClass(multiLanguageClass);
  });
  $('nav button').each(function () {
    var langTypeFolder = $(this).attr('data-controller-folder-toggle').split("/")[0];
    var multiLanguageClass = 'multilanguage lang-' + langTypeFolder + '';
    if (undefined !== langTypeFolder && langTypeFolder.length <= 2) 
      $(this).addClass(multiLanguageClass);
  });

  /* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */
  if (lang == "en") {
    $('a[href="/"]').attr("href", "/en/home/");
  }

  /* ADD EXCLUSION NAV ITEMS */
  $('.exclude-me,.exclude-me a').addClass('exclude');
  $('.sqs-svg-icon--list a,.SocialLinks-link').addClass('exclude');

  /* REMOVE OTHER LANGUAGES AND KEEP EXCLUDED ITEMS */
  $('.multilanguage:not(".lang-'+lang+',.exclude")').remove();
});

</script>
<script>
/*setup language switcher*/
$('.header-title-text').prepend('<div class="language"><a href="/de/home" class="lang-en">Deutsch</a><a href="/en/home/" class="lang-es">English</a></div>');
</script>

wow its working! Thank you so much! This is great. 

18 minutes ago, slowtravelmorocco said:

wow its working! Thank you so much! This is great. 

Glad it helps

On 6/20/2020 at 3:35 PM, bangank36 said:

Glad it helps

hi @bangank36 would there be a possibility also to place the language switch on the top right instead of top left? And could we just name the switch "DE | EN" (german/english) and take away the flags? i think a bit more minimalistic design would fit much better on my site and the top left position could interfere with my logo that I will be placing there soon as well... I appreciate your support! 

On 7/4/2020 at 3:55 PM, slowtravelmorocco said:

hi @bangank36 would there be a possibility also to place the language switch on the top right instead of top left? And could we just name the switch "DE | EN" (german/english) and take away the flags? i think a bit more minimalistic design would fit much better on my site and the top left position could interfere with my logo that I will be placing there soon as well... I appreciate your support! 

I will update accordingly

@bangank36 great, thank you lots!

18 hours ago, slowtravelmorocco said:

@bangank36 great, thank you lots!

What is your site password again, thanks

@bangank36 It is "morocco2020" thank you!

@bangank36 Did you get access? Did it work? 

20 hours ago, slowtravelmorocco said:

@bangank36 Did you get access? Did it work? 

<style>
	.language {
        position: absolute;
        z-index: 999;
        top: -20px;
        right: 0;
        display: inline-block;
      }
      .language a:first-child {
        border-right: 1px solid #000;
      }
      .language a {
        border: none;
        margin: 0 5px;
        width: 40px;
        height: 26px;
        display: inline-block;
        background-position: center top;
        float: left;
        text-indent: 0;
        color: transparent;
        font-size: 18px;
        color: #000 !important;
      }
      .language [href="/en/home/"] {
        background: none;
        background-size: cover;  
      }
      .language [href="/de/home"] {
        background: none;
        background-size: cover;
        width: 33px
      }


</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() { 
  /* SETUP MULTI-LANGUAGE */
  var defaultLanguage = 'de';
  var lang = location.pathname.split("/")[1];
  var defaultClass = 'lang-'+defaultLanguage+'';
  var itemParent = "nav [class*='collection'],nav [class*='folder'],nav [class*='index'],nav [class*='group']";
  if (lang == "" || lang.length > 2 ){
    var lang = defaultLanguage;
  }

  /* ADD LANGUAGE CLASSES */
  $('a[href="/"]').addClass('lang-'+defaultLanguage+'').parents(itemParent).addClass('lang-'+defaultLanguage+'');
  $('nav a:link:not([href^="http://"]):not([href^="https://"])').each(function () {
    var langType = $(this).attr('href').split("/")[1];
    var multiLanguageClass = 'multilanguage lang-' + langType + '';
    if (undefined !== langType && langType.length <= 2) 
      $(this).addClass(multiLanguageClass).parents(itemParent).addClass(multiLanguageClass);
  });
  $('nav button').each(function () {
    var langTypeFolder = $(this).attr('data-controller-folder-toggle').split("/")[0];
    var multiLanguageClass = 'multilanguage lang-' + langTypeFolder + '';
    if (undefined !== langTypeFolder && langTypeFolder.length <= 2) 
      $(this).addClass(multiLanguageClass);
  });

  /* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */
  if (lang == "en") {
    $('a[href="/"]').attr("href", "/en/home/");
  }

  /* ADD EXCLUSION NAV ITEMS */
  $('.exclude-me,.exclude-me a').addClass('exclude');
  $('.sqs-svg-icon--list a,.SocialLinks-link').addClass('exclude');

  /* REMOVE OTHER LANGUAGES AND KEEP EXCLUDED ITEMS */
  $('.multilanguage:not(".lang-'+lang+',.exclude")').remove();
});

</script>
<script>
/*setup language switcher*/
$('.header-title-text').prepend('<div class="language"><a href="/de/home" class="lang-en">DE</a><a href="/en/home/" class="lang-es">EN</a></div>');
</script>

@bangank36 hey there, I was wondering if you could help again?

I am facing the issue, that I can only link navigation items into my footer. But I can´t manage to just show the english navigation there when using the english website version or only showing the german navigation links in the footer, when using the german website version. I hope there is a code solution to that issue?

The following links would need to be included into the footer:

german urls:

de/faq-reisen-in-marokko

de/datenschutz-impressum

english urls:

en/faq-when-traveling-in-morocco

en/data-security-imprint

here´s the link again: www.slowtravelmorocco.com

Thank you so much - I also posted a thread in the general forum but havent had any response since weeks..

In footer I only see the social icons, where is the link

Please check again, now I linked both english and german content. But best would be only the ones showing depending which language switch is being used at that moment. 

also i have had problems with the language switch. it disappears, when I´m using a button on the right corner in the header. is there a possibility of chosing a different position for the language switch in that case?

the language switch generally disappears, when I´m inserting a logo actually. When I turn the logo off and just use a normal site titel the language switch is visible again. maybe a little bug that can be fixed?

If you’re going for style...we created a sleek drop down selector that floats at bottom of screen for translating your 7.0 or 7.1 site through Google Translate... https://www.squareaddons.com/shop-2/language-selector-translate

On 9/1/2020 at 1:23 PM, slowtravelmorocco said:

the language switch generally disappears, when I´m inserting a logo actually. When I turn the logo off and just use a normal site titel the language switch is visible again. maybe a little bug that can be fixed?

 

I'm having the exact same problem and I see you've got the language switcher working nicely on your website, floating on the navigation bar. May you let me know your solution?

I am looking to find a way that I can create a button on the page that if the suer clicks it will change teh language toggle from english (natural state) to Spanish (first option under the toggle. This would be the first page as a landing page only. The issue is currently the users header can only change by language based on the switching to the language toggle.

Quote

t