Problem:
The client wanted to add a separator like "|" between the languages in the WPML language switcher and needed help with the CSS code to properly position and style the separator. Additionally, the client required assistance with displaying the language switcher horizontally with the separator on mobile devices.
Solution:
We recommended checking our documentation on creating a custom language switcher and fixing styling issues:
To change the separator color and position, we provided the following CSS code:
.menu-item.wpml-ls-item.menu-item-wpml-ls-2-es::after {<br /> content: "|";<br /> position: absolute;<br /> right: 0 !important;<br /> top: 0px !important;<br /> color: red !important;<br /> left: 0 !important;<br /> margin-left: 19px !important;<br />}For mobile alignment and separator, we suggested this CSS:
#et_mobile_nav_menu .menu-item.wpml-ls-item.menu-item-wpml-ls-2-es::after {<br /> content: "|";<br /> position: absolute;<br /> color: red !important;<br /> left: 20px !important;<br /> margin-left: 35px !important;<br /> bottom: 27px;<br />}To ensure both languages appear on the same line on mobile, we provided additional CSS:
#et_mobile_nav_menu li#menu-item-wpml-ls-2-es, #et_mobile_nav_menu li#menu-item-wpml-ls-2-en {<br /> width: 50px !important;<br /> float: left !important;<br />}<br /><br />#et_mobile_nav_menu li.wpml-ls-item a {<br /> padding-left: 28.078px !important;<br />}Please note that the solution provided might be outdated or not applicable to your case. If the issue persists, we highly recommend checking related known issues, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If necessary, please open a new support ticket for further assistance.
