Add language switch under the burger icon

Hey Markus,

Thank you for the inquiry.

You can use one of the snippets that we provided in the following threads, and modify it a bit so that the language switcher is rendered beside the icon menu.

// https://kriesi.at/support/topic/wpml-language-selector-in-main-menu/#post-314208
// https://kriesi.at/support/topic/wpml-language-switcher-offers-languages-in-which-no-content-is-available/#post-1182955

Best regards,
Ismael

Hi,

Thank you for the update.

Add this snippet in the functions.php to render the flags inside the header.

function ava_icl_language_selector(){
	$langs = array();
	$languages = function_exists('icl_get_languages') ? icl_get_languages(): [];
	foreach($languages as $l){
		$langs[] = '<a href="'.$l['url'].'">'.$l['code'].'</a>';
	}
	echo "<div id='av-custom-lang-switcher'>";
	echo join(' ', $langs);
	echo "</div>";
}
add_action('ava_main_header', 'ava_icl_language_selector');

Then use this css code to adjust the position of the switcher.

#av-custom-lang-switcher {
    position: absolute;
    right: 50px;
    bottom: 0;
}

Best regards,
Ismael

Hi,

Glad to know that it is working. To fix the overlap issue, try to set the z-index property of the language switcher.

#av-custom-lang-switcher {
    position: absolute;
    right: 25px;
    bottom: 10px;
    z-index: 9999;
}

Thank you for your patience.

Best regards,
Ismael

Hi,

No problem. Looks like you have also managed to adjust the style or position of the switcher on mobile using a css media query.

@media only screen and (max-width: 767px) {
    #av-custom-lang-switcher {
       position: absolute;
       right: 26px;
       bottom: -5px;
       z-index: 9999;
       text-transform: uppercase;
       font-size: 12px;
    }
}

Best regards,
Ismael