Jump to content

Inserting a language switch on the menu header

Recommended Posts

Hi guys,

currently my language switch button is inserted as you can see in the photoimage.thumb.png.a5e91a9547ad08d726262d2dcffba3d2.png

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)

Screenshot2023-04-25alle10_14_19.thumb.png.0db701fbdbd08cce356c61cb41660d50.png

Link to comment
  • Replies 8
  • Views 476
  • Created
  • Last Reply

Top Posters In This Topic

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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?

Link to comment

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

/en/home/ and /it/home/

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

You could try this solution:

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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:

image.thumb.png.74b021a9509405dce5505fd250cc8b62.png

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

 

Screenshot 2023-04-26 alle 16.45.40.png

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.