MasterStudy - Language Switcher Renders as Plain Text in Mobile Menu

Overview of the issue

When using the MasterStudy theme with WPML, the language switchers added directly to the main menu display as raw/plain text on mobile views. This happens because the theme bypasses standard WordPress menu rendering functions.

Workaround

Please, make sure of having a full site backup of your site before proceeding.

• Open the …/wp-content/themes/masterstudy/partials/headers/parts/mobile_menu.php file.
• Around line 20, look for:

  foreach ( (array) $menu_items as $key => $menu_item ) {
          

• Add the following directly below:

  // Detect WPML LS with class 'wpml-ls-item' 
  $classes = is_array( $menu_item->classes ) ? $menu_item->classes : array(); 
  if ( in_array( 'wpml-ls-item', $classes, true ) ) { 
      continue; 
  }
          

• Then find near the end of the file, look for:

  echo $menu_list;
          

• Replace it with:

  $menu_list .= '<div class="stm_lms_categories_dropdown__parent">'; 
  $menu_list .= do_shortcode( '[wpml_language_selector_widget]' ); 
  $menu_list .= '</div>' . "n";
  echo $menu_list;
          

Styling Note:

1. You can style your language switcher in “WPML > Language > Custom language switchers”
2. Our language switcher has a specific width. To make it full-width on mobile (under 1025px), add this CSS in your stylesheet or in the Customizer > Additional CSS.

   @media screen and (max-width: 1025px) {
     .wpml-ls-legacy-dropdown {
         width: 100%;
     }
   }