Inserting a language switch on the menu header

Hi guys,

currently my language switch button is inserted as you can see in the photo

When I scroll down the page of course while the menu is also scrolling down the button is fixed there.

Would it be possible to put It here as part of the header menu? would be awesome if I could use the same font and size (just like a weglot button)

Can you share your website URL? How have you installed the language switcher?

3 hours ago, Ziggy said:

Can you share your website URL? How have you installed the language switcher?

The link is:

www.cantinalepietre.com

I’ve followed a guide, with a custom code. All the pages are set like /en (English) /it (Italian)

10 minutes ago, Zenocavallari said:

I’ve followed a guide

What guide?

You may be able to install this in a different way to place it ::before the social icons, but that depends on the way it's installed.

2 hours ago, Ziggy said:

What guide?

this is the guide I followed:

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

though I did exactly used the code as wrote by the guide, this is the one I used:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<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];
    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 == "it") {
    $('a[href="/"]').attr("href", "/it/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">English</a> | <a href="/it/home/" class="lang-it">Italiano</a></div>

2 hours ago, Ziggy said:

You may be able to install this in a different way to place it ::before the social icons, but that depends on the way it's installed.

that would be great! do I need to write it on the custom css or code injector?

You could simply put these links in the navigation for English and Italian:

/en/home/ and /it/home/

1 hour ago, Ziggy said:

You could simply put these links in the navigation for English and Italian:

/en/home/ and /it/home/

I though about that, but is there a way to move those two link to the right of the navigation menu? Right next the instagram button? 

You could try this solution:

7 hours ago, Ziggy said:

You could try this solution:

 

thanks, that helped, though I have a couples of problem: 

Since I wrote the " /* REMOVE OTHER LANGUAGES AND KEEP EXCLUDED ITEMS */"  part, If I add a ITA and ENG link where each of them are connected to it/home (ITA button) and en/home (ENG button), when I switch to Italian I only see the ITA button and when I switch to English I only see the ENG button since I excluded other languages pages.

Is there a way to modify the exclusion in a way that for example if I switch to English and exclude all the /it links i still include the ITA link that is connected to the /it/home?

Another possibility would be to use the link ad: cantinalepietre.com/it/home and cantinalepietre.com/en/home but the css guide only works for one since page so the result is this:

is there a way to modify the CSS in the guide to move also the ITA button?