Language Switch Button Code

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?