Streaming live at 10am (PST)

Dropdown menus cover each other


I’d like to ask for your help.

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.

here is the published version

and a read-only link

Anyone known what might be causing 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.

That did the trick for me :slightly_smiling:
Hope it helps!

Hi @StevenP

I tried what you’ve suggested. The upper dropdown works fine, but the second one now doesn’t respond at all.

Any thoughts?

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 :wink:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.