Different menu for different pages – wpml language selection not displaying

Hey soltner,

Thank you for the inquiry.

Did you set the language selector to display on a specific menu? If that it the case, you may need to instead manually insert the language selector using the designated hooks. Please check this documentation for more info.

// https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/#using-php-actions

Best regards,
Ismael

Hi,
Thank you for your patience and the login, I enabled your function and disabled line 153 in your stylesheet to test, I see that you are using the burger menu so the main menu language selectors are hidden. I assume that you want to show the language selectors next to the burger menu so I added this css:

.js_active.html_burger_menu #header_main #avia-menu > li.av-language-switch-item.language_de,
.js_active.html_burger_menu #header_main #avia-menu > li.av-language-switch-item.language_it,
.js_active.html_burger_menu #header_main #avia-menu > li.av-language-switch-item.language_en {
	display: block;
}

I also found that your language selectors were duplicating in the header so I added this script to remove the duplicates:

function custom_script() { ?>
    <script>
const tags = [...document.querySelectorAll('#avia-menu > li.av-language-switch-item')];
const texts = new Set(tags.map(x => x.innerHTML));
tags.forEach(tag => {
  if(texts.has(tag.innerHTML)){
    texts.delete(tag.innerHTML);
  }
  else{
    tag.remove()
  }
})
</script>
    <?php
}
add_action('wp_footer', 'custom_script');

Now your language selectors are showing and you have different menus on different pages.
Please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad to hear this helped.
The dropdown language selector needs to be assigned to a specific menu, right now it’s assigned to the wpml menu

the wmpl menu is used in the top bar as the Secondary Menu above the header and not in the header.
But since you are modifying the menus to show a different menu on different pages you won’t be able to choose one main header menu to show the language selector in.

Best regards,
Mike

Hi,
Perhaps I can write a script to move the language flags above the logo for mobile only, up to 590px would that work for you?

Best regards,
Mike

Hi,
Ok I added this to your child theme functions.php

function move_mobile_language_switch() { ?>
    <script>
(function($) {
var width = $(window).width();
if ((width <= 590)) {
$(".av-language-switch-item").each(function() {
        $(this).appendTo("#header_meta>.container>.sub_menu");
});
} else {}
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'move_mobile_language_switch');

and this to your child theme stylesheet

#header_meta>.container>.sub_menu>li.av-language-switch-item {
margin-top: 10px;
list-style:none;
}
#header_meta>.container>.sub_menu {
	display: flex;
	justify-content: center;
}

please clear your browser cache and check.

Best regards,
Mike

Hi,

Great, I’m glad that Mike could help you out :-)

Please let us know if you should need any further help on the topic or if we can close it.

Best regards,
Rikard

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike