Mutli-language site navigation

Hi! 

I have a site and used code to make it multi-language without using Weglot. I am very happy with it except for one detail -- in the Spanish version, the navigation disappears. Any ideas of how to fix this?

Thanks,

Johanna

Can you share your website URL and how you've added the multi-language?

Yes, here is the site: https://lychee-walrus-g6fy.squarespace.com/

And here is the code that I used:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.6.0/css/flag-icon.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
/* CONSTANTS */
  var defaultLanguage = 'en';
  var defaultClass = 'lang-' + defaultLanguage;
  var itemParent = "nav [class*='collection'],nav [class*='folder'],nav [class*='index'],nav [class*='group']";
  var languageData = {
    en: {
      code: 'en',
      path: '/en/home',
      flag: 'flag-icon-us',
      homepagePath: '/en/home',
      homepageLink: '/en/home'
    },
    es: {
      code: 'es',
      path: '/es/home',
      flag: 'flag-icon-mx',
      homepagePath: '/es/home',
      homepageLink: '/es/home'
    }
    // Add more languages here as needed
  };

/* SETUP MULTI-LANGUAGE */
  $(function() {
    var lang = location.pathname.split("/")[1];
    if (!(lang in languageData)) {
      lang = defaultLanguage;
    }

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

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

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

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

    /* SETUP LANGUAGE SWITCHER */
    var languageSwitcherHtml = '<div class="language-picker">';
    for (var languageCode in languageData) {
      if (languageData.hasOwnProperty(languageCode)) {
        var language = languageData[languageCode];
        languageSwitcherHtml += '<a href="' + language.homepageLink + '" class="lang-' + language.code + '"><span class="flag-icon ' + language.flag + '"></span></a> ';
      }
    }
    languageSwitcherHtml += '</div>';
    /* append for desktop version */
    $('.header-menu-nav-folder-content').prepend(languageSwitcherHtml);
    /* append for mobile version */
    $('.header-actions').prepend(languageSwitcherHtml);

    /* LANGUAGE SELECTION REDIRECT */
    $('.language-picker a').on('click', function(e) {
      e.preventDefault();
      var selectedLang = $(this).attr('class').split(' ')[0].replace('lang-', '');
      var currentPath = location.pathname;
      var redirectUrl;

      if (currentPath.startsWith('/' + lang + '/')) {
        redirectUrl = currentPath.replace('/' + lang + '/', '/' + selectedLang + '/');
      } else {
        redirectUrl = languageData[selectedLang].homepagePath;
      }

      window.location.href = redirectUrl;
    });
  });
</script>

43 minutes ago, amandahouston said:

And here is the code that I used:

This isn't using weglot.

The reason that the spanish translation isn't appearing is probably because you haven't set those pages up correctly, and they don't appear in the pages navigation.