This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

This thread is resolved. Here is a description of the problem and solution.

Problem:How to hide the Language Switcher flag icon with CSS (Flatsome Theme)

Solution: Add the following code in
WPML > Language > Language switcher options > Additional CSS
or
Appearance > Customize > Additional CSS

/* Remove LS Flag */
.header-language-dropdown .icon-image,
.header-language-dropdown .image-icon,
.sidebar-menu .image-icon,
.sidebar-menu .icon-image{
    display: none;
}

This topic contains 6 replies, has 2 voices.

Last updated by stormyL 1 year ago.

Assigned support staff: Alejandro.

Author Posts
October 13, 2018 at 3:30 am #2813677

stormyL

I am trying to hide the icon at the language switcher. However, i can't fix it through the backend setting. Can you provide the css code?

October 15, 2018 at 12:16 pm #2817328

Alejandro
Supporter

Languages: English (English ) Spanish (Español ) Italian (Italiano )

Timezone: Europe/Rome (GMT+02:00)

Hello,
Welcome to WPML Support.
I'll do my best to sort your issue out.

There are 2 ways of doing this:

1) Using the in-built Language Switcher Settings found in WPML > Languages > Menu/Widget/Footer/Custom Language Switcher > "+ Add a new language Switcher to a menu"
Once there you can deselect the "Flag" option in "What to include in the language switcher"

you can also check the documentation to learn more about WPML's language switchers:
https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/

2) Adding the following custom CSS code in WPML > Language > Language switcher options > Additional CSS:

/* Hide Language Switcher Flags */
.wpml-ls-flag {
    display: none !important;
}

Let me know how it goes and remember that you can always return if you encounter any WPML related issues, we'll gladly do our best to help you solve your problem.

October 15, 2018 at 1:10 pm #2817581

stormyL

Hi Alejandro

The css is not working for my site. I can still see the icons on the page.

October 15, 2018 at 1:42 pm #2817793

Alejandro
Supporter

Languages: English (English ) Spanish (Español ) Italian (Italiano )

Timezone: Europe/Rome (GMT+02:00)

Sorry about that.

Change the previous code for this one:

/* Hide LS flags */
.header-language-dropdown .image-icon {
    display: none;
}

you can also try adding "!important" (without the quotes) at the end of "none", if the code provided above doesn't work. it should look like this:

/* Hide LS flags */
.header-language-dropdown .image-icon {
    display: none !important;
}

Let me know how it goes.

October 15, 2018 at 1:57 pm #2817861

stormyL

For desktop site, only works partially

For mobile site, seems not working

October 15, 2018 at 2:17 pm #2817934

Alejandro
Supporter

Languages: English (English ) Spanish (Español ) Italian (Italiano )

Timezone: Europe/Rome (GMT+02:00)

Again, sorry for the confusion, it appears the menu has different classes assigned to them.

Try this code instead:

/* Remove LS Flag */
.header-language-dropdown .icon-image,
.header-language-dropdown .image-icon,
.sidebar-menu .image-icon,
.sidebar-menu .icon-image{
    display: none;
}

These were all the classes i could find for the header navigation menu. if you happen to have custom widgets or footer menus, with flags showing, let me know so i can take a look at them as well, and update the code.

Let me know how it goes.

October 17, 2018 at 2:07 am #2822729

stormyL

My issue is resolved now. Thank you!