CSS class of footer navigation items for language switcher

Site URL: https://mikala.ch

Dear community

I've used a code injection to enable multi-language setup of my site. Now I wanted to add two basic links to the the footer middle block to let user change the language of the site. These links should be in the same css class as the footer navigation items so that if the design gets changed, the language switcher links are also changed.

Does anyone know how to do that?

Many thanks in advance for your help!

Add to last line in Code Injection Footer, code from this guide.

<script>
/*setup language switcher*/
$('.Footer-middle').prepend('<div class="language"><a href="/en/home" class="lang-en">English</a> | <a href="/es/acceuil/" class="lang-es">Español</a></div>');
</script>

then add this to Home > design > Custom CSS

.language {
    text-align: center;
}

Thanks @tuanphan

your code got me the language switcher in the footer middle block, but it didn't take over the same CSS class as the footer navigation items. Is there a way where I can get the language switcher as the same class as the footer navigation items, so if the style of the footer navigation is changed, the language switcher gets changed as well?

6 minutes ago, immiike said:

Thanks @tuanphan

your code got me the language switcher in the footer middle block, but it didn't take over the same CSS class as the footer navigation items. Is there a way where I can get the language switcher as the same class as the footer navigation items, so if the style of the footer navigation is changed, the language switcher gets changed as well?

 

edit script code to

<script>
/*setup language switcher*/
$('.Footer-middle').prepend('<div class="language"><a class="Footer-nav-item" href="/en/home" class="lang-en">English</a> | <a class="Footer-nav-item" href="/es/acceuil/" class="lang-es">Español</a></div>');
</script>

Unfortunately, that edit doesn't change anything 😔