Hamburger menu not working for longer menus on mobile

[adamkucharski]

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]

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]

Fixed by r-lib/pkgdown#2716. Keeping this issue open until the next release of pkgdown.

[jayhesselberth]

@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]

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:

[jayhesselberth]

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]

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: