Coding Help: Multilingual Navigation Menu

I found this article: 

https://medium.com/@hardluckcreative/making-better-multi-language-squarespace-sites-e46d24094a7d

This is my variation of the code to tailor the website between English and French. 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $(function() { 
  
  /* SETUP MULTI-LANGUAGE */
  var defaultLanguage = 'en';
  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];
    
 /* Set English designation if there's no language subfolder */
    if (langType != 'fr') {langType = 'en'; }

    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 == "/") {
    $('a[href="/"]').attr("href", "https://www.sgtguides.com/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>
<div class=”language”><a href=/home class=”lang-en”>English</a> | <a href=/fr/home class=”lang-fr”>Français</a></div>

Though, the only issue I am having still, is when I visit the websites of the different language home pages separately (It shows the navigation the way I want it.) Good! 😀👍

https://www.sgtguides.com/fr/home
https://www.sgtguides.com/home

But when I click on the English/French button on the site, the navigation still shows both versions of the navigation menus? Not good. 😪 Can anyone help with the issue?

Thank you!
 

21 minutes ago, paul2009 said:

I should probably start by saying that this script was originally written by @bradgood in this article: How to setup multi-language content on any Squarespace Template. As he mentions just after step 6, as you're using a Brine-family template, you'll need to disable 'Ajax Loading' in Site Styles.

Did this help? Please give feedback by clicking an icon below  ⬇️

Thank you so much! That is exactly what I needed!