WPML language switcher in menu

Hi,

Thank you for the update.

You can use the “icl_language_selector” action hook inside the header container to render the language switcher beside the burger menu element. Add this code in the functions.php file.

function ava_icl_language_selector(){
	do_action('icl_language_selector');
}
add_action('ava_main_header', 'ava_icl_language_selector');

You can then adjust its position using css.

Best regards,
Ismael

Hi,

Thank you for the update.

You can add the following css code to adjust the position of the language switcher — move it beside the burger menu and add a thin border between the items.

#lang_sel_list {
    position: absolute;
    right: 50px;
    top: -10px;
    border: 0;
}

#lang_sel_list .wpml-ls-item {
	border-right: 1px solid;
}

#lang_sel_list .wpml-ls-item:last-child {
	border-right: 0;
}

Please don’t forget to toggle the Performance > File Compression settings after adding the code.

Best regards,
Ismael

Hi,

Thank you for the update.

Did you put the code inside a css media query? Please move it outside so that it will also be applied on mobile view, then add this one inside a css media query to adjusts the size of the logo and create more space for the switcher and burger menu.

.responsive .logo img {
	max-height: 109px !important;
}

You may need to adjust the line-height property of the switcher and mobile menu.

#lang_sel_list {
    line-height: 105px;
}

.html_burger_menu_active #top #wrap_all #header .av-burger-menu-main > a {
	line-height: 105px !important;
}

Add the code inside the css media query for mobile view.

Best regards,
Ismael

Hi,

Thank you for the update.

A css media query looks something like this.

@media only screen and (max-width: 767px) {
   body {
    background-color: lightblue;
  }
}

The background color will only be applied to the body element when the device’s screen width is equal or less than 767px. Please review our suggestions above and move the css code accordingly. Or post the login details in the private field so that we can edit the css modifications.

Best regards,
Ismael

Hi,

Sorry for the delay. We corrected the css code in the Quick CSS field and added the recent modification for mobile view. We also disabled the Performance > File Compression settings temporarily. Please check the following screenshot.

Screenshot: https://imgur.com/a/CFtoIqA

Best regards,
Ismael

Hi,

Great! You’re welcome.

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael