Burger Menu Closes After Selecting Language

Hello, is it possible that the burger menu closes after selecting the language? Now there is an unnecessary step which can also be confusing as the language doesn't seem to change when clicked. 

Thank a lot!

What is your site url?

@tuanphan  thanks a lot for your prompt reply!

https://www.nsagarantie.com/

@tuanphan just a friendly reminder

Try this code to Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('.header-menu-nav-item a').click(function(){
    $('body').removeClass('header--menu-open');
    $('button.header-burger-btn.burger').click();
  });
})
</script>

If it doesn't work, you can remove the code, I will test it again

hello @tuanphan thank you very much for your message but unfortunately the code is not working. 

On 2/26/2024 at 1:44 AM, hello_studiofrey said:

hello @tuanphan thank you very much for your message but unfortunately the code is not working. 

Can you keep First Line in the code? I can check it again easier

@tuanphan Do you mean "<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>" ? If yes, then I just inserted it.

Thank you!

I still testing some code, but if I can't find a way, you can consider moving Language outside burger, and place it next to burger. What do you think?

@tuanphan I tried that but unfortunately it looked squeezed in between burger and logo. Is there a way to shorten the names? For example to have EN instead of English. Then I think it would work.

Thanks!

On 3/4/2024 at 9:32 PM, hello_studiofrey said:

@tuanphan I tried that but unfortunately it looked squeezed in between burger and logo. Is there a way to shorten the names? For example to have EN instead of English. Then I think it would work.

Thanks!

You can use this code to Custom CSS box. I think the text looks fine, if you still want to rename language name, I will give extra code

@media screen and (max-width:991px) {
.header-display-desktop {
    display: block !important;
    position: absolute;
    right: 15vw;
    z-index: 99999999;
}

.header-display-desktop .header-title-nav-wrapper, .header-display-desktop .header-burger {
    display: none;
}

.header-dislay-desktop .header-actions.header-actions--right {
    display: flex !important;
}

div#multilingual-language-picker-desktop {}

.header-display-desktop .header-actions.header-actions--right, .header-display-desktop div#multilingual-language-picker-desktop {
    display: flex !important;
}
}

@tuanphan Thank you for the code, I just inserted it. However, I would like to shorten/rename language names. Could you please provide the code for that? Also, is it possible to hide the language switch inside the burger menu now? So that it's not double. 

Thank you very much!

On 3/11/2024 at 4:32 PM, hello_studiofrey said:

@tuanphan Thank you for the code, I just inserted it. However, I would like to shorten/rename language names. Could you please provide the code for that? Also, is it possible to hide the language switch inside the burger menu now? So that it's not double. 

Thank you very much!

Rename this on mobile only or both desktop + mobile

and it should be

English > EN

Italiano > IT

Francais > FR

Slovecina > SL

Hrvatski > HR

Deutsch > De

?

With language on burger menu, use this CSS to remove it

nav.header-menu-nav-list .language-picker {
    display: none;
}

@tuanphan 
Renaming only on mobile please and the shortcuts are correct as you wrote it. (EN, IT, FR, SL, HR, DE)
Thank you very much for the code to remove the burger menu, it works well! 

1 minute ago, hello_studiofrey said:

@tuanphan 
Renaming only on mobile please and the shortcuts are correct as you wrote it. (EN, IT, FR, SL, HR, DE)
Thank you very much for the code to remove the burger menu, it works well! 

You can use this CSS code

@media screen and (max-width: 767px) {
 .language-picker .current-language-name  {
     font-size: 0 !important;
}
html[lang*="en"]
.header .language-picker .current-language-name:after {
    content: 'EN';
    font-size: 14px !important;
}
[lang="fr"] .header .language-picker .current-language-name:after {
    content: 'FR';
    font-size: 14px !important;
}
[lang="it"] .header .language-picker .current-language-name:after {
    content: 'IT';
    font-size: 14px !important;
}
[lang="sl"] .header .language-picker .current-language-name:after {
    content: 'SL';
    font-size: 14px !important;
}
[lang="hr"] .header .language-picker .current-language-name:after {
    content: 'HR';
    font-size: 14px !important;
}
[lang="de"] .header .language-picker .current-language-name:after {
    content: 'DE';
    font-size: 14px !important;
}
.header-actions  .language-picker-content  .language-item span {
    font-size: 0;
}
.header-actions  .language-picker-content .language-item:nth-child(1) span:after {
    content: 'EN';
    font-size: 14px;
    width: 100%;
    display: inline-block;
}
.header-actions  .language-picker-content .language-item:nth-child(2) span:after {
    content: 'IT';
    font-size: 14px;
    width: 100%;
    display: inline-block;
}
.header-actions  .language-picker-content .language-item:nth-child(3) span:after {
    content: 'FR';
    font-size: 14px;
    width: 100%;
    display: inline-block;
}
.header-actions  .language-picker-content .language-item:nth-child(4) span:after {
    content: 'SL';
    font-size: 14px;
    width: 100%;
    display: inline-block;
}
.header-actions  .language-picker-content .language-item:nth-child(5) span:after {
    content: 'HR';
    font-size: 14px;
    width: 100%;
    display: inline-block;
}
.header-actions  .language-picker-content .language-item:nth-child(6) span:after {
    content: 'DE';
    font-size: 14px;
    width: 100%;
    display: inline-block;
}
.language-picker-content {
    min-width: 30px !important;
}
}