Streaming live at 10am (PST)

Dropdown menus cover each other


#1

Hi,

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
http://vinit01.webflow.io/wines

and a read-only link
https://preview.webflow.com/preview/vinit01?preview=b2cbd37faa9a5b30dc44cbadde65ade8

Anyone known what might be causing this?
Thanks


#2

@bubble

Hi!

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!


#3

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?


#4

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.


#5

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:


#6

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