Jump to content

CSS class of footer navigation items for language switcher

Recommended Posts

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!

 

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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;
}

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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?

image.thumb.png.565e17082ec307ca6fe969b563fda931.png

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.