driesdd

Here’s a less technical workaround. It requires javascript, so it won’t work for 1-2% of people with javascript disabled. This might be good enough for many sites.

It introduces some JS code that looks at the URL and based on that, hides the elements that are in the wrong language.

First, create menus for every language. Let’s say English is the default one and French is the second one.

Then, give both of them a CSS class using the advanced settings. “en-only” for English and “fr-only” for the French menu.

Then, add all of them to your template. Yes, you will see two menus in the editor. However, we will hide one of them.

Next, add this piece of JS to your site. You can use a plugin like ‘custom CSS and javascript’. Make sure to add it in the footer, so it is loaded after the main content.

if (window.location.pathname.match(/fr/) != null) {
var divsToHide = document.getElementsByClassName("en-only"); //array
var divsToShow = document.getElementsByClassName("fr-only");
}
else {
var divsToShow = document.getElementsByClassName("en-only"); //array
var divsToHide = document.getElementsByClassName("fr-only");
}

for(let i = 0; i < divsToHide.length; i++){
divsToHide[i].style.display = 'none';
divsToHide[i].hidden = 'true';
}
for(let i = 0; i < divsToShow.length; i++){
divsToShow[i].style.display = 'block';
divsToHide[i].hidden = 'false';
}

The code looks for “/fr/” in the URL and if found, it will hide the English menu and all other items with the ‘en-only’ class and show the French elements instead. Else, it will do the opposite. If you have more than 2 languages you can add extra ifs or a switch statement.

You can also add the “fr-only” or “en-only” to other elements like text in your footer or a language switcher button that redirects to the homepage in the other language.

• This reply was modified 1 year, 5 months ago by driesdd.
• This reply was modified 1 year, 5 months ago by driesdd.