I’m looking for a way to better style the locales list without using a dropdown. I want the visitor just to choose between languages, without the useless dropdown. So I just put the locales list in the navbar, which works technically, but now i can’t find a way to have the two languages side by side. I want the language names to be side by side, just like the the old dropdown switcher on the far right in the navbar: De | En . Can anyone help me with this?
This works, but how do I insert the “|” between the languages? It should look like this: De | En, with the current language highlighted. Thank you for the help!
That’s trickier;
Here are 4 approaches for your situation.
Add a right-side border on your locale item, plus custom CSS to suppress the border on the last item with CSS :last-child()
Use CSS :after to append the | pipe delim character to every item except the last one, resembling this rule;
.item:not(:last-child)::after {
content: " |";
}
Create two switchers, and use CSS to suppress all options except the relevant one. That way you can place one item at a time.
Use one locale switcher only, and hide it. Create your own UX and use JS to trigger the locale switcher.
I used approach #4 last week to create this;
I tend to go the JS approach for controller UX’s because it gives me the most control on when and how things happen.
You’ve given me an interesting idea though- I’m evolving an attributes-based controller pattern in my SA5 Elements library, to support attributes-based button-controllers for tabs, sliders, and accordions. I should be able to expand that in the future to cover other elements such as the Locale Switcher.