Help with Multilingual Squarespace website

Dear Community,

I am in the process of making my website Multilingual.

For the moment I have set up a test Squarespace website to experiment on, though the implementation on my live website will be the same.

Website: http://lychee-sheep-23gt.squarespace.com/
Password: 123456789 
Template: Brine

I have followed the guide found here https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template with great success.  However, I am stuck on the following: On the mobile / tablet view I would like the Language switcher to appear on the bottom of the mobile menu and not in the header...

For reference here is the code I have used so far.

CODE INJECTION FOOTER:

Quote

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
  window.Squarespace.onInitialize(Y, 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();
});
  
/*setup language switcher*/
$('body').prepend('<div class="language"><a href="/de/home" class="lang-de">DE</a> | <a href="/en/home/" class="lang-en">EN</a></div>');

</script>

 

CUSTOM CSS:

Quote

/*setup language switcher*/
.language {
  color: #fff;
  position: absolute;
  top: 0px;
  font-size: 10px;
  right: 15px;
  z-index: 99999;
  a {
    color: #000000;
    &:hover {
      opacity: 0.8;
    }
  }
}

Please take note: I am not a coder. I can understand instructions on code and modify them so they work for me.... If somebody could please help me with this, it would honestly make my day!

Thanks 

Max

remove top: 0px, and replace with bottom: 0;

.language {
    color: #fff;
    position: absolute;
    font-size: 10px;
    right: 15px;
    z-index: 99999;
    bottom: 0;
}

not related, where did you get script code...

1 hour ago, tuanphan said:

remove top: 0px, and replace with bottom: 0;

.language {
    color: #fff;
    position: absolute;
    font-size: 10px;
    right: 15px;
    z-index: 99999;
    bottom: 0;
}

not related, where did you get script code...

The script works and an example can be found under the website address given in my post. I want to move the language switcher into the mobile menu when my website is vied on a mobile. 

27 minutes ago, thecigarbible said:

The script works and an example can be found under the website address given in my post. I want to move the language switcher into the mobile menu when my website is vied on a mobile. 

 

@media screen and (max-width:640px) {
.language {
    bottom: 0;
	left: 0;
}
}

5 minutes ago, tuanphan said:

@media screen and (max-width:640px) {
.language {
    bottom: 0;
	left: 0;
}
}

 

I will give this a try later when I am on my laptop 🤞🤞🤞

11 minutes ago, thecigarbible said:

I will give this a try later when I am on my laptop 🤞🤞🤞

and remove top: 0px