Archived topic
Change Mobile Menu from Dropdown to Slide
13 replies · Started by Stephen on July 9, 2021
I have two categories with subcategories in my menu. In mobile view, I don't want the subcategories to drop down like in desktop mode.
When the use clicks the arrow, I want the whole menu (full panel) to slide over to the left and be replaced with the subcategories for that parent category. The menu design would look the same, just with the different nav choices (subcategories, instead of parent categories). It would have a back arrow to go back to parent categories too.
Pretty sure I saw this in at least one of your templates (I chose the Catalyst template.)
How do I do it?
Hi there,
Not sure if I fully understand.
Are you referring to the off canvas panel?
https://docs.generatepress.com/article/off-canvas-panel-overview/
If not can you link me to the page in question or the example you saw from the site library?
Let me know :)
Yes.
1. Click on burger to open off canvas panel.
2. Click an arrow on a parent category.
3. Parent categories slide left to show subcategory options for that parent category.
1 & 2 should be the default behaviour.
3 would require a custom solution.
Can you link me to the example you saw in our site library?
Yes, they are the default behavior. I was just describing the process for clarity. The important part was how to make the parent categories slide off the screen to the left and be replaced with the subcategories (for the selected parent) from the right.
I just checked the entire Site Library. None of them have it. Is there an easy way to do it, though?
Unfortunately that will require a custom solution.
The simpler solution would be to use the parent category as the parent menu item and subcategories as the sub menu items and adapt the default behavior.
I don't understand.
My primary nav is composed only of parent categories (no pages), so they are the parent menu items. The sub menu items are the subcategories (only two parents have subs). But that just uses default actions (dropdown).
How do I "adapt the default behavior)?
Thanks.
Maybe I'm a little confused about what you asking.
Can you link me to the page in question?
Yes.
I'm basically asking how to make sudmenu items slide in instead of dropping down, on mobile menu, off-canvas panel.
Yeah unfortunately making things slide would require a custom (likely javascript) solution.
The slideout navigation is using a javascript solution as well.
Sorry about that!
Ok. Can I suggest this as an option in GP?
The dropdown action doesn't look good in mobile when it adds scroll bars. Yuck. It looks like a 90's iframe. It seems like you could just add a little css and allow users to choose this sliding option instead.
Like this: https://codyhouse.co/gem/secondary-sliding-navigation
I can't add that code myself because I'm not sure which parts would conflict, since GP is already running js on it.
Thanks anyway.
I can't recall other requests on this - typically the menu item names aren't that long and there aren't that many items.
Would the overlay option work better in your case?
https://docs.generatepress.com/article/off-canvas-panel-overview/#style
Then you can try changing the font size and menu item height smaller to save some more space:
https://docs.generatepress.com/article/off-canvas-panel-overview/#menu-item-height
Even some of the templates in the site library have scroll bars visible in when their sub menu items are showing in Mobile view.
As for me, I'm using overlay and have decreased font size to 18. It's fine, but I prefer the sliding menu that I linked to and have seen on other sites. I'm surprised nobody requested it, but hopefully when I outsource some of the customizations, he'll be able to handle it.
Sounds good.
I'll bring it up for internal discussion as well.
