Divi custom header error with shortcode translate press

Hi!

I have created a custom header which is not working properly on mobile.
To replicate the issue, please use IOS iPhone safari.
I am using translatepress and have enabled the 'show opposite language in the language switcher'
Also I have used this manual to make the menu disappear when scrolling down and appear when scrolling up. This uses a shortcode in the header. Maybe it is interfering with the shortcode of translate press? https://www.elegantthemes.com/blog/...olling-up-hide-while-scrolling-down-with-divi

Replicate the issue:
1. Go to https://stilltinnitus.com
2. Click the flag --> you'll see it 'highlights' it instead of changing the language
3. Click the flag again --> now, it changes the language
This is not user friendly.

Now please replicate this:

1. Click the hamburger icon (menu opens)
2. Click the flag (flag turns grey)
3. Click the hamburger icon (nothing happens, it seems like it is 'out of focus' )
4. click the hamburger icon again (now the menu closes again)

It looks like there is some sort of 'focus' issue.

If you open the website on a computer instead of mobile, and make the browser screen as wide as a phone, you will see that the issue does not appear. It seems it is because on the computer, you can hover to get the hover function to focus on the flag or the menu.

Since this is not user friendly at all I hope you can help me out!

Thanks

 

I think this is just due to the translate press coding of the language switcher shortcode. I managed to get the desired result (only click once to change the language) by doing this:

- do not use language switcher shortcode
- make a new menu with only the language switcher item
- set this menu to show open, not hamburger style on mobile with this code. Done!

/*show desktop menu on phone*/
@Media (max-width: 980px) {
.pa-open-mobile-menu .et_pb_menu__menu {
display: flex!important;
}
.pa-open-mobile-menu .et_mobile_nav_menu {
display: none!important;
}
}