Dropdown menu is not working

HTML & CSS
#1

https://www.discovernauts.com/de/

On the mobile menu, when the language switcher drop down icon is clicked, the flyout menu disappears . When the drop down icon is clicked it should show the English language sub menu . Can it be done with CSS ?. I don’t want to use any java script.

#2

You could just show both items by default and then either one can be clicked.

e.g.

@media screen and (max-width:1150px){
  .ast-header-break-point .main-header-menu ul .wpml-ls-sub-menu 
  {visibility:visible}
 .wpml-ls-native:after{display:none;}
}
#3

I want a drop down for language switcher.

#4

It seems you already have a drop down on hover that works:

– If you cliock the second language the page reloads with that language.

– But if you click the down arrow, you actually click the current language and the menu closes as intended, I guess.

#5

It doesn’t work on mobile Erik as you can’t show the English language option unless you touch the link and then it just reloads the same page before you can touch the English link :slight_smile:

1 Like
#6

I gave you code to show both links as you only wanted a css solution.

CSS :hover doesn’t work (properly) on touch devices so you would need to implement a JS solution if you want a drop down menu to appear correctly on touch devices.

2 Likes