Jump to content

Multilingual Menu Issues

Recommended Posts

Hi All

Hope you can help.

I used the following guide to set up multilingual site

https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template

With minor amendments to keep the English version at the root ie yogajardin/ and the french version using /fr

So I followed the guide until the point of putting English | French in the menu and it added it to the top left (including a white bar) and neither of the links were clickable.

So I decided to try another method and use a button in the menu for EN / FR. This has worked to a certain extent: it works on desktop fine but on mobile version the FR button is not visible on the EN mobile menu as below:

image.png.eb8d4ad97fc6e534c6029cb00a214ae6.png

 

But the EN button is visible on the FR menu as below:

 

image.thumb.png.8139c62f3381b4ceb79c89ac5f9d7cb4.png

 

I believe this has something to do with the EXCLUDE operator in the header code injection. 

 

/* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */
  if (lang == "fr") {
    $('a[href="/"]').attr("href", "/fr/acceuil/");
  }
/* 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>

 

However, I find this not a perfect solution because the language changer is hidden in the menu plus it requires page header code injection for every French page I create.

What I would really like is to have EN | FR above this button as below (as the button was previously used as a CTA for Booking) on both desktop and mobile versions but I cannot seem to get this working - does anyone have any ideas how to get it to work?

image.png.9f119811280e97e466d035b63be07ceb.png

Hope this makes sense

Site is: https://yogajardin.com

Thanks

Matt

Link to comment
  • Replies 7
  • Views 666
  • Created
  • Last Reply

Top Posters In This Topic

Ok so first part solved, have managed to get it on desktop menu

image.png.8c7e8f08345a790872609c94cf352176.png

 

However it does not appear on mobile site at all? Ideally I want it on site and not embedded in the menu so people can change immediately

image.png.24dddcd5f150daeb33c823c3ada28971.png

Thanks

 

Matt

Link to comment

I added the following code

 

@media screen and (max-width:991px) {
.header-display-desktop {
    display: block !important;
    position: absolute;
    right: 15vw;
    z-index: 99999999;
}

.header-display-desktop .header-title-nav-wrapper, .header-display-desktop .header-burger {
    display: none;
}

.header-dislay-desktop .header-actions.header-actions--right {
    display: flex !important;
}

div#multilingual-language-picker-desktop {}

.header-display-desktop .header-actions.header-actions--right, .header-display-desktop div#multilingual-language-picker-desktop {
    display: flex !important;
}
    .header-burger {
        visibility: hidden;
    }
}

 

But when I use it I get the following in the mobile header

 

image.png.a0d2240f94c46aecf4bd574ec310977e.png

Link to comment

Header code injection:

<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 == "fr") {
    $('a[href="/"]').attr("href", "/fr/acceuil/");
  }
    
/* 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 */
    $('.header-nav-wrapper').prepend('<div class="language"><a href="/fr/acceuil" class="lang-fr"><span style="font-size:12pt;">FR |</span></a><a href="/" class="lang-en"><span style="font-size:12pt;"> EN</span></a></div>');
  });
</script>

 

And custom CSS

 

/* Desktop Language Position */
.language {
    position: static !important;
    margin-left: 1vw;
}
.header-nav-wrapper {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

Link to comment

Is there anyone who could just identify why this doesn’t appear in the mobile menu? I’m desperate! I’m sure it’s just a typo or omission but can’t seem to work out what I’ve done wrong. 
 

thanks in advance!

 

Matt

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.