Streaming live at 10am (PST)

Problem with scrolling a dropdown list

Hi,
I’m having real trouble with scrolling down to the bottom of a dropdown list in my navigation menu. I’ve tried the solution I’ve read on the forum which advises setting a height value and overflow to Automatic on the dd list, but although this is working fine on mobile devices, I have a client with a 13" Mac screen who cannot scroll to the bottom of the list.

On the site, it’s the ARTISTS dropdown that isn’t scrolling properly. This is populated dynamically with values from the ARTISTS collection, so it will be growing…

Thanks for any help!


Here is my site Read-Only: **[https://preview.webflow.com/preview/continuum1?utm_medium=preview_link&utm_source=designer&utm_content=continuum1&preview=f28269b0fd4c744c58b1ec7b1ddda528&mode=previewaring-your-sites-read-only-link

Take a look at this post.

Hi,
Thanks for this link. However, I followed these instructions and in fact on my site the mobile scrolling DOES work, it’s the desktop version that isn’t working as my client has a 13" screen and can’t scroll to the bottom of the dropdown. I’m afraid that I can’t see why it doesn’t work.

If someone could take a look at the code, maybe I’ve missed something somewhere??

Thanks.

You could try using text columns on the container of the dynamic items and increase the width of the parent to 400px or refactor the menu. Offhand that is what comes to mind for me.

Hi, Thanks for your input but it seems you are suggesting a workaround? The site has been live for a long time and the client doesn’t want the design changed, but because they’re adding more items to the Artists tab, this problem has presented itself.

I can’t understand why the dropdown will scroll a certain amount, but then not to the bottom of the list. As I mentioned, this is not a problem on mobile and I’ve compared the settings on every element of the mobile/desktop menus, and I simply cannot find where the problem is.

Would love someone to see if they can spot what I can’t!

Thanks.

If I put overflow:auto only on the .collection-list wrapper and remove it from the collection-list-wrapper-3, I get a scroll bar on the dropdown when the height is taller than the view port. Does this not address the issue?

Hi Jeff, Many thanks again for your help. I’m a bit confused about your advice because you talk about the .collection-list wrapper and collection-list-wrapper-3 which to my mind are the same thing as there is only 1 collection list wrapper.

I do see a scroll bar on the dropdown, but it only scrolls down a short distance, bu not to the bottom of the list. The attached photo shows my browser resized to try and emulate what my client is seeing, and as you can see, the bottom of the list is cropped off. The image doesn’t show a scrollbar as it vanishes when I take the screenshot, but it is there…!!

Screenshot 2020-05-23 at 14.14.36|690x431