Odoo: adding language selector in the top menu

When you use Odoo’s website module with multiple languages, by default, you can switch languages by using the language selector/switcher which located at the bottom of website. But it is more useful and make sense if the language switcher is at top of the website too.

The default location of language switcher is at the bottom

I tried to find how to add, change the language selector in the top menu for Odoo 13. I found some paid apps available, but I think there should be the way to do that by myself. Here is the summary of how to add the language selector in the top menu manually.

The theme which I use is the Bootstrap, default theme. I checked the menu “Customize > HTML/CSS/JS editor”. From the editor panel, there is the language selector section.

It is a definition of language selector at the bottom of the website. I copied and modified the code like this. The modified parts are

• li class: changed to “nav-link”
• div class: changed from dropup to dropdown

I want to add a language selector next to the last menu or around there.

The position which I want to add language selector.

So I need to find the XPath or that position. I use the Web developer’s inspector. Click the position I want, copy the XPath.

The XPath value which I got is

/html/body/div[1]/header[1]/nav/div/div/ul/li[4]/a

But when I checked the section “Fixed Top Menu” from the “Customize > HTML/CSS/JS Editor”, I think I can just modify to this

//header[1]/nav/div/div/ul/li[4]

Here is the snippet code for the new “Fixed Top Menu”

Finally, I got another language selector in the top menu.

We can use this snippet to create a view in a customized module also.