I'm having an issue with the mega menu's on mobile

I have a mega menu with 5 columns in it. It looks great on desktop. However, on mobile when you click the menu item it tries to display as 5 columns instead of the columns folding into 1 column. I spent a few hours arguing with chatgpt to fix it, but it seems like it could be an issue with the js functions or functions.bundle. As a hack job I ended up making a mobile include and a desktop include but that is giving me a ton of trouble i just want to fix it correctly.

Here is a url to a demo page.
https://fthassets.com/NewWeb/index.php

Here is a link to a non edited page from the template sourcce.
http://fthassets.com/NewWeb/mega-menu-full.html *Note how the "blog" menu item, when you view on mobile the columns do not fold, instead they go full width and they should be contained.

Now compare to this page:
https://canvastemplate.com/mega-menu-full.html *when you click blog all the menu items collapse down into one column. This is the behavior I'm looking for with my menu