Double language menu showing

Site URL: http://www.nosoapcompany.com

Hi you clever coding people,

I injected some code onto my squarepage website to enable dual language display. I now have my website available in both English and Dutch. 

When you go to www.nosoapcompany.com everything looks fine. Then when I click on the Dutch flag (or on any other menu item), it switches to showing the menu in both languages simulatenously. 

All my Dutch pages have www.nosoapcompany.com/nl/... and all the english ones have www.nosoapcompany.com/en/...

This is what the custom code looks like:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/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']";

  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 == "nl") {

    $('a[href="/"]').attr("href", "/nl/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="/en/home" class="lang-en"><span class="flag-icon flag-icon-gb"></span></a> <a href="/fr/home/" class="lang-fr"><span class="flag-icon flag-icon-fr"> </span></a> <a href="/nl/home" class="lang-nl"><span class="flag-icon flag-icon-nl"></a></div> 

 

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.6.0/css/flag-icon.css">

 

I hope there is someone here who can help me fix this.

Kind regards,

Naomi

Home > Design > Site Styles > Disable Ajax Loading.