Skip Navigation

If you add a sidebar language switcher to a site using the Twenty Seventeen theme, there is a slight visual issue in its appearance.

Front-end glitch when using a sidebar language switcher with Twenty Seventeen theme
Front-end glitch when using a sidebar language switcher with Twenty Seventeen theme

This happens due to some styling conflicts and can be easily fixed using the following solution.

Go to the WPML -> Languages page and add the following CSS rules to the Additional CSS section of the Language switcher options.

.widget .wpml-ls-flag {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle,
.wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle:hover,
.wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle:focus {
    box-shadow: none;
}

 

Adding simple CSS rules for proper rendering of the language switcher
Adding simple CSS rules for proper rendering of the language switcher

 

Now, the sidebar language switcher will be rendered correctly on the front-end.

Sidebar language switcher after applying the solution
Sidebar language switcher after applying the solution