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

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

Edited by paul2009

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

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.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

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.

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

Create an account or sign in to comment

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

×
×
  • Create New...