I have two dropdown menus on my page. They seem to work fine on desktop version of the page, but on a mobile (portrait), when they are stacked on top of each other, some thing strange is happening. When I click on the upper one, it unfolds, but it’s content is somewhat mixed up with the lower dropdown.
I tried to mess up with z-indexes, but i doesn’t seem to help.
I work on this site with a developer, who is also bogged down with this.
What’s causing this problem is that your main wrapper (“wines header block filter”), being used in three instances: for both dropdowns and the slider element last in order. I played around with the Z-index on that wrapper. The sub classes (“left” and “slider”) will inherit the Z-index you set on the wrapper that doesn’t have a sub class.
What I did was setting the non-sub class wrapper to Z index 4 (the first one where you select grape), the second wrapper with the subclass “left” to Z-indez 3 and the last one to Z-index 2.
Interesting thing is (when z-indexes are set according to @StevenP ), that second dropdown works until I open the first one. After that it stops responding. It looks like the upper dropdown is somehow covering it even after it closes.
OK looks like the problem had something to do with dropdown animation. I deleted the interactions, set up the z-indexes and it seems to be working.
Thanks
