Dropdown menu masked by overflow:hidden property

Hi,

I’m not sure is there a bug or is just my fault. I’ve following problem:

I added a background video with a dropdown select item on it. If i put the video BG settings Overflow to: “Hidden” it cut off the dropdown menu. (see picture)

My solution for this was to set the overflow to : “visible”. And it shows the full length of the dropdown menu. Now i discovered a new problem. If the video BG is set on overflow: visible i’ve an annoying overflow on all mobile devices. (See picture)

Anyone with the experience and can give me some advice?

Are you testing on mobile devices? Because to begin with, as it seems you’re showing you design for mobile screen size, you should realize that there is no such thing as HTML5 video bg on mobile device. No video in-line (in place) play, no auto start nor loop. On tablets, in-place play but no autostart nor loop.

As for you question, when you face that situation, wrap your element that has overflow hiden in another div, and extract the dorpdown item to be sibling of the overflo hidden block. Then positon:absolute it on top of it. Now your menu is fully visible when dropping down.

Thanks Vincent. This works. :+1:

But as BG videos don’t work on mobile i’m considering to replace the video BG with an image only for mobile devices.

Yes, you’re right. You may be tempted to explore the gif animated way, but it proves itself extremely frustrating. Even by chosing a half resolution gif, with the size of screens we have now, even one second of gif is way too big.

But with JS and Webflow you have many many creative ways to translate your video bg on desktop to something animated on mobile. JS+SVG animation, or simply using Webflow onLoad interaction to make an image move, slide, zoom… you can use layers to increase variations, transparent textures… there is room for creativity here :slight_smile:

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