Accordion Mobile Navigation

Hi,

I’m using Moesia theme and have a Main Navigation menu set as the Primary Menu in the normal location. It has a few top-level navigation items, and a lot of sub items in some of those top-level nav items. The top bar is fixed on all screens, and the mobile nav does not scroll. The menu is too long on phone screens, though, so I would like to make the menu accordion on mobile to save vertical space. So, when the hamburger button is clicked/tapped, it should show all of the top-level nav items, and then clicking/tapping each of these should expand the sub items with the accordion effect.

https://jqueryui.com/accordion/
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol

Something like is in this tutorial would be great (but with my own styling etc and only when the hamburger menu is being used) :

I followed that tutorial and tried to implement it, presuming it would just replace the Main Navigation menu being used by Moesia, but nothing happened after the last step (replacing the wp_nav_menu function).

Is this possible? Any help would be appreciated.

Thanks!

Hello,

It looks like this issue requires some coding and testing, this goes beyond our support policy. It’s considered advanced customization. As an option, you can contact Codeable for this kind of service, or find a reputable freelancer on Upwork.

Kind Regards, Roman.