Mobile navigation errors

I'm working with a client to update a site they already have built on the Hot Wedding theme, one of the issues is the mobile navigation.

The mobile navigation does not work properly on any mobile device. Only the top level navigation actually works. When looking at the JS and CSS files for the navigation the hover class is still being executed even on mobile, of which hover doesn't exist for mobile. Therefore the webkit transitions to expand menu's are still firing and also renders all child navigation disabled for some reason. The navigation simply does not work.

In looking this is true on your demo site as well, the navigation for "mobile" only works if you are viewing a reduced screen size on a desktop which uses hover correctly. I've checked this on my Galaxy S4 phone and Nexus 7 tablet.

Do you have a fix for this readily available?

Send link please

my client's site is harps-international.com

but as i stated the same issue exists on your demo demo.hotjoomlatemplates.com/wedding/

the child level navigation does not work on mobile devices.

I recorded video from your demo showing this, the video resolution has been lowered to upload to youtube if you want the full resolution video I'll send it over

youtu.be/GRKbtbJiwPc

Add this to bottom of template_css.css

DIV.topmenu_area > DIV.container{
z-index:999;
}