Changing Mobile Nav Bar with Custom Code

Site URL: https://allyquirk.com/

Hi there! Hoping someone can help with this -- I am looking to change the mobile navigation/menu bar on my "Wells" template site. I attached photos of what my nav bar on mobile currently looks like and an example from another site that I would prefer it to look like. Right now, the subsections are too confusing to follow and I would like the pages with subsections to have a dropdown, instead of all being displayed at once. The screenshot below in the darker gray is what my mobile nav bar currently looks like and the 2 screenshots in white/light gray are what I'm going for. From my understanding, this template does not allow for mobile nav bar adjustments so I'm assuming the solve will have to be with custom CSS. 

https://allyquirk.com/

Thanks so much! 

I don't have code to add dropdown, but you can consider adding an arrow or plus next to main item + reduce size of sub items, something like this

li.mobile-folder>a:before {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    position: relative;
    top: 2px;
}
#mobileNav .main-nav li.mobile-folder ul * {
    font-size: 14px !important;
}