elvinB-6

Problem:
The client is trying to customize the language switcher to only show flags, similar to the display on the WPML website.

Solution:
We recommend adding and configuring language switchers in WPML -> Languages. Scroll down to the "Language switcher options" section, where you can create a language switcher for a menu, widget, and/or footer. In the options for each language switcher, you can enable the Flag option to display only the flag.

For detailed instructions, see the following guides:

• Language switcher setup guide,
• How to add flags to language switchers

If you want to further customize the look and feel, you can use custom CSS. Here is an example of CSS that hides the button-like section and adjusts the styling:

button.sub-menu-toggle {
    display: none !important;
}

.primary-navigation .sub-menu {
    border: none!important;
    background-color: white!important;
}

.primary-navigation .sub-menu li.wpml-ls-item {
    background-color: white!important;
    padding: 0px!important;
}

li.wpml-ls-item {
    background-color: white!important;
}

.primary-navigation .sub-menu::before {
    content: none!important;
    background-color: white!important;
}

.primary-navigation .sub-menu:after {
    content: none!important;
}

.primary-navigation .sub-menu .wpml-ls-item > a {
    padding: 10px!important;
}

li.wpml-ls-item > a {
    padding: 10px!important;
}

For more information on customizing with CSS, visit How to fix styling and CSS issues for language switchers.

If this solution doesn't look relevant, please open a new support ticket at WPML support forum.