Hamburger menu not working for longer menus on mobile

epiverse-trace / epiversetheme

https://epiverse-trace.github.io/epiversetheme/

0 stars 1 forks source link

Hamburger menu not working for longer menus on mobile #5

Open adamkucharski opened 10 months ago

adamkucharski commented 10 months ago

Please place an "x" in all the boxes that apply

[ X] I have the most recent version of this package and R
[ X] I have found a bug
[ X] I have a reproducible example

On mobile, if a user loads a page with many options in the dropdown hamburger menu (e.g. the epidemics page), then the items in the lower section of the dropdown cannot be clicked, because when the user scrolls down, the menu disappears. Likely a CSS issue in the library (i.e. pixel constraint) being used to display the current website.

Bisaloo commented 7 months ago

I don't think there is a great solution here. Beyond this specific issue, a dropdown with that many options will always be a bit awkward. A solution may be to get rid of the dropdown and direct users to the articles index page: https://epiverse-trace.github.io/epidemics/articles/ when we get a large number of vignettes.

Bisaloo commented 4 months ago

Fixed by https://github.com/r-lib/pkgdown/pull/2716. Keeping this issue open until the next release of pkgdown.

jayhesselberth commented 4 months ago

@Bisaloo Can you confirm whether this actually fixes the issue for you? It's tedious to test with pkgdown itself because I'd have to create a bunch of dummy vignettes that actually exist. In particular, I'm not sure whether 280px is the appropriate value.

Bisaloo commented 4 months ago

Yes, I confirm it fixes the issue. I tested with Firefox responsive design mode and this is the result while emulating an iPhone SE 2022. In particular, I confirm I can scroll in the articles menu without accidentally scrolling in the main window. From what I've seen, other phone layout give similar results.

New:

Screen Shot 2024-07-15 at 09 35 11

jayhesselberth commented 4 months ago

Sorry, I should been more clear. Scrolling already worked on mobile browsers. The intent of the PR was to activate scrolling on non-mobile browsers in dropdowns with many articles.

Bisaloo commented 4 months ago

Scrolling already worked on mobile browsers. The intent of the PR was to activate scrolling on non-mobile browsers in dropdowns with many articles.

This PR then also indirectly solves the issue described here, which affected mobile browsers. When the article dropdown was taking the entire screen, you couldn't scroll down in the dropdown without scrolling down on the main page and thereby closing the dropdown.

I confirm this also activated scrolling on non-mobile browsers as you intended: