Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
ADMEDIA

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

Share this post


Link to post

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.

Edited by paul2009

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post

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

 

Share this post


Link to post
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.


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post

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. 

Share this post


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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post

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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...