Sticky header and long dropdown menus issue

Shopify / dawn

Shopify's first source available reference theme, with Online Store 2.0 features and performance built-in.

Other

2.48k stars 3.32k forks source link

Sticky header and long dropdown menus issue #1852

Open ludoboludo opened 2 years ago

ludoboludo commented 2 years ago

Describe the current behavior

When a dropdown is very long you can't scroll to the bottom of it if the viewport is smaller than the dropdown height. Specifically when the header is sticky not when at the very top of the page.

Video capture

Describe the expected behavior

Should be able to see the rest of the dropdown

Version information (Dawn, browsers and operating systems)

Dawn Version: 6.0.2

Possible solution

Workarounds would be to disable the sticky header or use the mega nav.

duygukalaycioglu commented 1 year ago

Two quick questions:

When does this start happening? (viewport height)
I think the same issue might occur with the mega menu if the nav links are too many. Is there a way for the rest of the menu to show up when the user scrolls down even the viewport is shorter?

eugenekasimov commented 1 year ago

@duygukalaycioglu

This issue is not happening with mega-menu because we allow scrolling there. https://screenshot.click/06-56-mfh2l-xul86.mp4

We can add scrolling to dropdown menu as well. In my opinion it doesn't look beautiful, on the other hand it might be a really rear case and it's okay in that case.