Jump to content

How to create a language picker at the top of the website

Recommended Posts

Hello there!

 

I am building a two-language site and I would like to have somthing like a permanent announcement bar but with two small flags at the corner, one Swedish and one English. If you click on one flag, you will get linked to the corresponding language site.  How can I do this? It doesn't need to be sticky, only be located at the top of the screen. 

 

Thanks in advance!!

 

Adrian

Link to comment
  • Replies 11
  • Views 2.3k
  • Created
  • Last Reply
  • 3 weeks later...

Although flag icons can be a useful visual cue, bear in mind that best practice (based on user experience design) is to always use the name of the language in its native format, rather than flags.

Flags aren't languages and can offend a large proportion of your audience unless the site is aimed at a specific country. For example, English is widely spoken. If you add an US flag, how will visitors react in Australia, Canada, Ireland, New Zealand, Singapore, South Africa and the United Kingdom?

One way to make it easier for visitors is to automatically select the correct language based on the visitor's browser language.

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment
58 minutes ago, 4DImmotek said:

well I still need something to add English and French in a small format in header  no browser language detection as my price structure will be different from USA and France

@4DImmotek  This thread is about selecting the correct language for the visitor, not pricing for different territories. Your posts refer to a very different requirement so you may want to start a new thread for your question.

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment

Thank you for all of the suggestions. Using code to have the languages switch automatically seems like a great idea. But would it be hard to do and do I need a seperate domain for that? The plan is to use the same .com domain for all of the languages and just have different, duplicated and translated pages. 

Link to comment
On 12/14/2019 at 4:08 AM, ADMEDIA said:

Thank you for all of the suggestions. Using code to have the languages switch automatically seems like a great idea. But would it be hard to do and do I need a seperate domain for that? The plan is to use the same .com domain for all of the languages and just have different, duplicated and translated pages. 

You can use this tutorial (CS/JavaScript): https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template

or this way (CSS): https://cymbals-chicory-r44j.squarespace.com/?password=abc

Password: abc

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...

I'm bot sure if you still need help with this, but here is the method I used for my site (Brine template) FWIW. 

 

1. Add a menu item to the English navbar with the name of your secondary language in that language. (e.g Svenska). Alternatively, you can use the ISO language code (SV) if you want to save some space. This will be your toggle to go from the English version to the Swedish version of your site. 

 

2. Enable secondary navigation and translate every navbar item into Swedish save for the last one. Instead of "Svenska", use English (or EN).  Set the secondary navigation to inherit primary navigation styles in DesignSite Styles. Use the same layout for the secondary navigation as for the primary one. Right now both navbars are displayed. We'll fix that in a bit **. 

 

3. Create a second index page and name it "Svenska" (rename the other index page English). 

 

4. Duplicate every page of your site, translate them into Swedish (or into English if you started with the Swedish version obv) and place them under the newly created "Svenska" index page. Rename all the pages in Swedish (you can add something like "_sv" for example).

 

5. In your English navbar, link the "Svenska" menu item to the Swedish index page. In your Swedish navbar, link the "English" menu item to the English index page.

 

6. ** We obviously only want the English navbar to be displayed on the English version, and the Swedish navbar on the Swedish version. To do that, go to your English Index Settings > Advanced and paste the following:

<style> nav.Header-nav--secondary {
 display: none;
 }
 .Mobile-overlay-nav--secondary { 
display: none;
 }
</style>  

Then, in your Swedish Index Settings > Advanced, paste the following:

<style> nav.Header-nav--primary {
   display: none;
 }
  .Mobile-overlay-nav--primary {
   display: none;
  }
</style>

 

7. Optional: You can create a landing page as your home page and add 2 buttons (English and Svenksa) linked to English and Swedish index pages. 

 

8. You don't have to, but you can style your language navbar item to make it pop a bit. I made mine as a button and added a hover style in Design > Custom CSS.

/*Make last nav item a button*/
a.Header-nav-item:last-of-type {
    border: 1px solid white;
    border-radius:5px;
    background: transparent;
    color: #fff!important;
    padding: 11px 9px!important;
}
/*Add hover style to last nav item button*/
a.Header-nav-item:last-of-type:hover {
    background: #f3f3f3;
    color: #333!important;
}

 

Note that the code above does not apply the spotlight effect to the language navbar item. I'm not sure why (I am not a programmer and stumbled upon the code on a webpage). It leaves the language menu button always highlighted. I'm not sure if best practices apply here and I'll let pros chime in, but I like that. If you do want spotlight to apply to the language navbar item as well, try this code instead:

/*Make last nav item a button*/
.Header-nav-inner>a:last-child {
  border: 1px solid white;
  border-radius:5px;
  padding: 11px 9px !important;
  text-align: center;
}
/*Add hover style to last nav item button*/
.Header-nav-inner>a:last-child:hover 
  color: black !important;
  background-color: white !important;
}

 

I think that's about it. You can take a look at what this all looks like on my site http://gregorylassale.com 

Please note that I am not a programmer by any stretch of the imagination. I knew nothing about the matter until I undertook the project to built my site, which I did through trial and error and pieces of codes gleaned on the internet or given to me by knowledgeable people. I'm not sure the above would work on your site's template (if not from the Brine family) but hope it still helps.  

 

Cheers

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.