Skip to main content

Hey we would like to hide those flags that are essentially referring to countries in the language button.

Has anyone been able to remove/hide them, in a clean way 😄?

I think using CSS it would be something like this:

.language-selector img[alt="en"] {
display: none;
}

We did something similar to change the flag from US to Canada, so I’m 99% sure this is the part you need to turn off. 


@jvdc Just curious – what’s the reason behind wanting to hide the country flags in the language button? Is it more about the look & feel, or something else you’re aiming for? 😊


Hey ​@Michał Świączkowski , thanks for asking. It is mainly because the country flags are then putting the focus a language on a specific country, which is irrelevant for many people of other countries. We have many users from countries in Africa where the spoken language is French, but having to select a French country flag for them can be awkward.

See what a I mean?


Hey,

In order to also hide the flags in the dropdow, I  add to add a couple more lines, and then some lines to center everything.

/* Flags in language selector */
.language-selector img, .control-dropdown__item--with_image .dropdown-image {
display: none;
}
.main-navigation--language-switcher .language-selector {
width: auto;
padding: 0 10px;
}
.language-selector .selected .truncated {
margin-left: 0px;
}

 


Great that you found a solution ​@jvdc !