Mirror the Desktop Mega Menu Groups on Mobile

https://chinchilla-plums-zam7.squarespace.com/

PW: AdoptShelterPets

I built a mega menu for desktop that is working nicely. I'm not as happy with the mobile menu, however, because I would like to be able to group it similarly to the desktop. The reason for this is that for folders with a lot of pages, the mobile menu is overwhelming long. 

Is there a way to improve the mobile menu in terms of creating groups that mirror the mega menu, without adding more folders?

I've attached a screenshot of the more complicated section.

So it appears that I may not get an answer on this so I took a different approach and am very close to what I need. 

I was able to get a title above the items I wanted but that title appears across all the menus. How do I specific that this should only apply to the events-news mobile menu? 

Here is my current CSS.

/* Target the specific mobile menu item and add a title before it */ 
.header-menu-nav-item:nth-child(4)::before {
  content: 'TEMP - Annual Fundraisers';
  display: block;
  font-size: 24px; /* Adjust the font size as needed */
  margin-bottom: 10px; /* Adjust the spacing as needed */
  font-weight: bold; /* Optional: if you want the title to be bold */
  padding-top: 1.2em;
    color: #ce4a2c;
}
 

With mobile, my idea is add an Accordion Block to Footer

then we can use code to replace current mobile menu with this Accordion Block, to achieve Dropdown Menu on mobile

What do you think?

Interesting! That will need a script, yes?

It turns out that the answer lies in targeting the folder for the sub-menu.

[data-folder="/events-news"] 

Yes. Need a script code, if you still need help, let me know, I can do a quick guide

I am interested in the script! Thank you. We do have a decent solution with the CSS but I think the accordions may be even better.