I had an interesting issue last week when working with the fantastic WordPress Multi-Language (WPML) plugin and the world’s most popular theme, Divi. With Divi listed as fully compatible with WPML, everything seemed to work really well straight out of the box. Even bits of content that fell outside the standard WordPress content editor were editable via the ‘String Translations’ function of WPML.
However, the one thing I really struggled with was getting a nice row of language-option flags to show up in the main menu (or indeed anywhere in the header). You can add them as a widget easily enough, but the only simple way to add them to the header appeared to be adding them directly to the main menu, which you can do via one of the options within the WPML settings. This works great, but the default option is to display them in a drop-down, and my client was really excited about having them all displayed in a row. There is an option for this within WPML, but for some reason it still adds a little drop-down arrow to the current language option, even though clicking it doesn’t really do anything.
I looked through the settings as best I could but I was unable to find any way to fix this – I assume it’s a bug of some kind, as I can’t see any use for it, but it’s quite hard to find the right search terms to type into Google when looking for a solution. Fortunately, our good friend CSS is able to help, and I came up with a quick fix that pulls out this anomalous drop-down arrow and removes the extra padding next to it. All you need to do is add the following CSS to your ‘Custom CSS’ in Divi (it’s at the bottom of Divi’s Theme Options):
.menu-item-language a {
padding-right: 0 !important;
padding-left: 0 !important;
}
.menu-item-language a:after {
display: none !important;
}
The first part of this fixes the spacing so that the language icons are spaced out evenly, and the second part removes the little arrow itself.
That’s all you need to do.
