Responsive Menu doesn't work on iPad

[drfretboard]

Problem:
Responsive menu not behaving to expectations

Context:
iPad 4
Safari
IOS 10.3.3

Issues:
Device horizontal: Navicon colours grey upon clicking (instead of required orange/red) and menu does not collapse/appear.
Device vertical: Navicon colours orange/red WITHOUT clicking (should be white). Menu does not collapse/appear.

Note that the colours are minor issues, the Menu not collapsing is THE problem.

Note:
No problems on:
Mac desktop with Safari OR Firefox (browser resized to small)
Win desktop/firefox

[thai]

Hi There,

Please find this custom CSS:

@media (max-width:  1024px) {
	.x-navbar {width: auto;}
	.x-navbar-fixed-left {border-right: 0;position: relative;}
	.x-navbar-fixed-left .x-brand {float: left;}
	body.x-navbar-fixed-left-active {padding: 0;}
	.masthead-inline .x-btn-navbar.collapsed, .x-btn-navbar {display: block;float: right;margin-right: 25px;}
	.x-nav-wrap.desktop {display: none;}
	.x-nav-wrap.mobile {padding-left: 60px;padding-right: 60px;}
	.x-nav-wrap.mobile.collapse.in {display: block;}
}

And change to this:

@media (max-width:  1024px) {
	.x-navbar {width: auto;}
	.x-navbar-fixed-left {border-right: 0;position: relative;}
	.x-navbar-fixed-left .x-brand {float: left;}
	body.x-navbar-fixed-left-active {padding: 0;}
	.masthead-inline .x-btn-navbar.collapsed, .x-btn-navbar {display: block;float: right;margin-right: 25px;}
	.x-nav-wrap.desktop {display: none;}
	.x-nav-wrap.mobile {padding-left: 60px;padding-right: 60px;}
	.x-nav-wrap.mobile, .x-nav-wrap.mobile.collapse.in {display: block;}
}

Let us know how it goes!