Help cleaning up custom CSS to fix mobile menu

Hey Kriesi team, as always, thanks for your help.

If you check out my company’s site (https://bardac.com)…neither the mobile menu nor main menu appear on iPads or on resolutions around that size. If you resize a browser on desktop, there is a period when no menu is present before the mobile menu appears.

I think this might be from conflicting custom CSS that has been added to Quick CSS over the past few years. I don’t want to change/remove anything without guidance as to not break my site or menu.

Is there any chance you can help me sort through this custom CSS? I’d imagine you’ll easily be able to point out what I should take out or change. Thanks!!

/* Mobile menu toggle */
@media only screen and (max-width: 990px) {
.main_menu, #header_main_alternate{ display: none; }
.container #advanced_menu_toggle, #advanced_menu_hide{ display: block; }
#mobile-advanced{ display: block; }
}
/* Header Meta adjustments */
@media only screen and (min-width: 480px) and (max-width: 990px) {
#header_meta .container{ width: 95%; margin: 0px 20px;}
}
@media only screen and (max-width: 480px) {
#header_meta .container { width: 100% !important; }
}
@media only screen and (max-width: 990px) and (min-width: 481px) {
.phone-info span { margin-left: 0; padding-left: 0; margin-right: 0}
.sub_menu li { padding-left: 1; padding-right: 1; margin-left: 0}
}
@media only screen and (max-width: 480px) {
.desktab { display: none; }}
@media only screen and (min-width: 480px) {
.mobiletab { display: none; }}