Multilingual Website: applying code footers for each language

Site URL: https://lifelab.world/en/home

Hello! 

I need some help please. I am on a SS 7.0 with brine template. I have been doing my research here on the forum and have been applying codes for solution for the footer to work and display the correct language. However, I have no luck.

I made 2 footers from the Top footer blocks for EN and Bottom footer blocks for DE. I am trying this code, but it does not seem to work.

This is from @tuanphan

Add 2 sections in Footer for 2 languages

• Top section for English
• Bottom section for DE

Next, find this code

if (lang == "de") {
    $('a[href="/"]').attr("href", "/de/home/");
  }

edit it to

if (lang == "de") {
    $('a[href="/"]').attr("href", "/de/home/");
	$('body').addClass('body-de');
  }

Next, add this to Code Injection > Header

<style>
  body.body-de footer.sections section:nth-child(1) {
  	display: none;
  }
  body:not(.body-de) footer.sections section:nth-child(2) {
  	display: none;
  }
</style>

Am I doing something wrong? 

For reference, I followed this solution in creating a multilingual site: https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template

Thank you in advance!


P.S.:

I currently put the code to hide the bottom footer block so only 1 footer will show on the website

.Footer-blocks--bottom {

display:none;

}

On 2/18/2022 at 1:32 AM, paul2009 said:

You've followed Brad's excellent article fine but there's an issue with your CSS - that isn't from the guide. 

You've added a "body-de" class to indicate when the German pages are shown which is great, but the classes you have used for the footer section are not correct for your Brine-family template.

The classes for the footer sections in your template are "Footer-blocks--top" (for EN) and "Footer-blocks--bottom" (for DE). You should therefore be able to use something like this instead:

.body-de .Footer-blocks--bottom {
  display: unset;
  }
.body-de .Footer-blocks--top {
  display: none;
  }  
  
body:not(.body-de) .Footer-blocks--bottom {
  display: none;  
}
body:not(.body-de) .Footer-blocks--top {
  display: unset;  
}

Did this help? Please give feedback by clicking an icon below  ⬇️

Hello paul2009,

Thank you so much! It worked, I am not that skilled. I just use the forum to learn and explore more. I make sure I exhaust all options and if I am really stuck, I ask here. I am so thankful and glad with this community. 🙏

Have an amazing day! 

Thanks / danke. It's a pleasure to help.