Menu triggered by hamburger not sticky

[charlesroper]

Describe the bug
In my mobile browsers (tried Firefox and Edge on Android) the vertical menu that appears when tapping the hamburger is anchored to the top rather than sticking to the viewport. This is really confusing when scrolled down the page because it seems as if the hamburger does nothing.

To Reproduce
Steps to reproduce the behavior:

1. Go to any page on mobile
2. Tap on hamburger menu
3. Scroll down the page
4. See error

Expected behavior
Menus should stick to viewport

Screenshots

[broeker]

Thanks @charlesroper, yeah, that has bugged me a bit also. What do you think of this approach?

https://nextra.vercel.app/

That's kind of what I had in mind, but I think your idea is different. In their case, they made the decision to have the menu open (full screen), or not open at all, with no ability to scroll at all if it is open.

[charlesroper]

That looks like a great approach - very happy with that. 👍

[arrowtype]

Considering suggesting Spacebook for some docs – it looks like a super nice 11ty starter for docs! But, this issue is somewhat of a blocker... for what it's worth, my opinion is that a menu is nice to have open while scrolling/reading on large viewports, but it's fine for it to block content on smaller viewports. If I had to express a preference for small-screen menu UX, it would probably be to leave a bit of the page showing, and for a tap outside the menu to close it. This helps show context, makes it simple to close, and helps prevent scrolling behind it (which can be awkward for users).

I've wrangled with CSS to do somewhat similar things, so I could probably point to some useful CSS-Tricks posts on it, if that would be helpful.

[mjhoefer]

Is this currently on anyone's radar? Or have some direction for what it would take to implement? @arrowtype I'm in agreement with your preferences.

Opening the menu once scrolled down also requires scrolling up to view the menu.