MasterStudy – Language Switcher Renders as Plain Text in Mobile Menu

Status: Resolved by author
Related plugin/theme: MasterStudy LMS Learning Management System
Topic tags: Compatibility

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:

You can style your language switcher in “WPML > Language > Custom language switchers”

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%;
  }
}
        
```

All known issues →