Jump to content

Pin Language Switcher to Header

Go to solution Solved by JoanGarroway,

Recommended Posts


(Q1) I currently have a language switching option at the top right of my website (English | Deutsch) and I would like to stylize it further. Right now it just floats at the top right of the page, but i would like to permanently fix this to the header to be inline with the shop icon. How can I do this? 

(Q2) I would also like to make it look nicer. For example a toggle button that just says EN and DE. See the attachment as an example.

(Q3) How can I make this toggle or button optimized for mobile? For example can I have it floating on the bottom left corner in a sticky position, or add it to the hamburger menu?

Can someone help me with this please? Maybe @tuanphan Thank you 🙂

Here is the Footer Script for the current setup: 

/*setup language switcher*/
$('body').prepend('<div class="language"><a href="/en/home" class="lang-en">English</a> | <a href="/de/home/" class="lang-de">Deutsch</a></div>');

Here is the CSS for the current setup:

.language {
  color: #994469;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 99999;
  a {
    color: #994469;
    &:hover {
      opacity: 0.8;

Bildschirmfoto 2023-10-06 um 3.33.08 PM.png

Edited by Matthew26
Link to comment
  • Solution

Hey, @Matthew26

(Q1) So you want to jazz up that language switcher, right? To fix it to the header and align it with the shop icon, you'll want to tweak the CSS. Maybe play with the 'position' and 'right' values in the CSS. Messing around with 'position: fixed' and 'right: [some pixels]' might do the trick.

(Q2) For a snazzier look, a toggle button with just EN and DE sounds cool

You'd need to modify the HTML and CSS for that. Add a button element and style it in the CSS to your liking. You could replace the 'English | Deutsch' links with buttons styled the way you want.

(Q3) To float it in the bottom left corner, adjust the 'position' and use 'bottom' and 'left' values in the CSS. Making it sticky might involve adding some 'position: sticky' magic. For the hamburger menu, you'd likely need to dig into Squarespace's structure and maybe inject the button there using code.

Keep experimenting, highlight my nickname if you need to spell out specific examples by code👾

Be nice, and don't forget to like or upvote my replies if they were helpful 🌸

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.