[ Navigation Block ] Make it Mobile Responsive #22824
I am using Navigation Block for creating Header Templates. I know it is still a WIP, just want to raise an issue that it is not mobile responsive yet.
From mobile responsive I mean to convert the menu items in a menu toggle icon for mobile screen sizes.
Is this something already in consideration?
The text was updated successfully, but these errors were encountered:
Does this cover what you were hoping to see? If so, please close this out so we can focus efforts there. If not, definitely share more of what you'd like to see and know that the people working on this are doing their best to create a responsive experience.
Thank you for reviewing this. I've checked the issue #22497 and that is not what this issue is about. That issue is to make the menu editing experience responsive.
In this issue, I want to raise it to devs attention that the menu itself is not responsive on the front-end.
By Responsive I mean to make the menu items enclosed inside a menu toggle for mobile devices.
For example here are the screenshots of a simple header template I have created.
Do you get my point? Right now in the gif above I implemented it with a little JS and inserting the icon/div in an HTML block.
let me know if you need more info.
Here's a rough outline for what we could start with —
Make a toggle on the Navigation block that defaults to collapsing to a menu on mobile.
On mobile, with the navigation block unselected, you see the burger icon.
Tap to edit. When you are editing (navigation block
On the frontend it works: on mobile (f.ex. we <480px), you see the burger icon:
Click it and a modal dialog opens, trapping tabs, and Esc or or the close icon closes the menu:
We could potentially use Micromodal for the dialog behavior, and this same behavior would benefit the burger menu whether it was a small dropdown, a fullscreen modal, an overlay sidebar, or most things in between.
It seems feasible to be able to offer both fullscreen modal menus, sidebar overlays, and inline dropdowns using the same markup and CSS only, as