I'm told that the mobile menu on my page (accessible through the 3 horizontal bars icon top right) doesn't close on iPhone. I can't check myself because I don't have Apple devices (on online iPhone simulators it does work though) but I don't see why it would work on Android and not on iPhone.
Here's the JS code controlling the mobile menu:
$( '#mobile_menu_icon' ).click(function() {
if( $( '.mobile_header_menu' ).css( 'right' ) == '-280px' ) {
$( '.mobile_header_menu' ).animate( { right: '0' }, open_delay, 'easeInOutExpo' );
$( '#wrap' ).animate({ right: '280px' }, open_delay, 'easeInOutExpo' );
$( 'body' ).addClass( 'overflow_hidden' );
}
else {
$( '.mobile_header_menu' ).animate({ right: '-280px' }, close_delay, 'easeInOutExpo' );
$( '#wrap' ).animate({ right: '0' }, close_delay, 'easeInOutExpo' );
$( 'body' ).removeClass( 'overflow_hidden' );
}
return false;
});
$( document, '.mobile_header_menu_close' ).click(function() {
if( $( '.mobile_header_menu' ).css( 'right' ) == '0px' ) {
$( '.mobile_header_menu' ).animate({ right: '-280px' }, close_delay, 'easeInOutExpo' );
$( '#wrap' ).animate({ right: '0' }, close_delay, 'easeInOutExpo' );
$( 'body' ).removeClass( 'overflow_hidden' );
}
});
$( '.mobile_header_menu_inner' ).click(function( event ) {
event.stopPropagation();
});
I removed the following piece and it worked. Don't understand why it was problematical on iPhones.
$( '.mobile_header_menu_inner' ).click(function( event ) {
event.stopPropagation();
});