Problem: The client needed to change the appearance of the WPML language selector to have a transparent background and a custom SVG icon. Solution: We provided an example of custom CSS code that the client could use to modify the language selector. Here are the steps:
/* Targeting the WPML language switcher menu item */<br />#menu-item-wpml-ls-26-en {<br /> background-color: transparent; /* Set background to transparent */<br />}<br /><br />/* Targeting the submenu toggle button */<br />#menu-item-wpml-ls-26-en .sub-menu-toggle {<br /> background-image: url('path-to-your-svg-file.svg'); /* Replace with your SVG file URL */<br /> background-size: contain; /* Adjusts the size of the SVG to fit the element */<br /> background-repeat: no-repeat; /* Prevents the SVG from repeating */<br /> border: none; /* Optional: removes any border */<br />}<br /><br />/* Hiding the default plus and minus icons */<br />#menu-item-wpml-ls-26-en .icon-plus, #menu-item-wpml-ls-26-en .icon-minus {<br /> display: none; /* Hide the default icons */<br />}<br />
Additionally, to remove the border from the language switcher, the following CSS can be used:
