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

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

@thecigarbible did this. @ADMEDIA 

10 hours ago, tuanphan said:

@thecigarbible did this. @ADMEDIA 

This looks promising 🙏🙏 Thank you!

I need the same thing how do I do it

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.

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

therefore Geo localisation is what is needed

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.

I'm just asking for a way to have 2 icons 1 for french 1 for English

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. 

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

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 Design > Site 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