[Resolved] Split: menu switcher issue

Hello,

can you please share more information about your menu switcher issue and what is wrong?

Regards,
Drazen

Hello,

thanks for your patience.

I tested this further and found that the WPML language switcher works correctly when using a default-supported theme such as Astra.

Because of that, this does not seem to be a WPML configuration issue. It points instead to the current theme and how it renders the header/menu output.

In other words, WPML is adding the language switcher correctly, but the active theme appears to override or customize the menu/header rendering, which is why the switcher does not show as expected.

I could not find this theme from our side as officially compatible so some issue may happen. I would recommend checking this with the theme author/developer, as they may need to adjust the header template or custom menu walker to properly support the WPML menu language switcher output.

Hope this helps.

Regards,
Drazen

Hello,

thanks for getting back.

I checked this further and the behavior is related to how the current theme renders the language switcher in the header. Instead of using the standard WPML menu language switcher output, the theme is displaying the languages as a custom header element with simple links. Because of that, the WPML flags are not rendered automatically as they normally would be when the switcher is added as a regular menu item.

Technically, providing custom code falls outside of WPML’s scope, since this behavior is controlled by the theme implementation not us. The best long-term solution would be to check with the theme author so they can adjust how the language switcher is rendered in the header or they can join our programe and we would glad to work together in makng their theme compatible.

However, as a temporary workaround, we can visually add the flags with custom CSS.

You can add the following CSS from your WordPress admin, Appearance → Customize → Additional CSS

Please note that the flag URLs below are based on your staging site, so you may need to adjust them for your production site.

a[href*="/it/"]::before,
a[href*="/es/"]::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 12px;
  margin-right: 6px;
  background-size: cover;
  background-repeat: no-repeat;
  vertical-align: middle;
}

a[href*="/it/"]::before {
  background-image: url('<em><u>hidden link</u></em>');
}

a[href*="/es/"]::before {
  background-image: url('<em><u>hidden link</u></em>');
}

This CSS simply adds a small flag image before the language links.

Please note that this workaround works when the language switcher is displayed as a list of links.

If the switcher is configured as a dropdown, the same approach may not work correctly because dropdowns are usually controlled by the theme’s JavaScript and custom markup, which CSS alone cannot reliably modify.

Hope this helps 🙂

Kind regards,
Drazen

Hello,

Thank you for the update.

Yes, I completely understand your concern. Adjusting in the theme code would be cleaner and better solution. They would be able to modify how the switcher is rendered in the header and include the flags properly.

If they need our help implementing compatibility with WPML, they are welcome to join our Go Global program, where we collaborate with theme and plugin authors to ensure proper integration with WPML:
https://wpml.org/documentation/support/go-global-program/

Please let me know if there is anything else we can do for you.

Regards,
Dražen