Menue on iPad does not work (portrait mode)

[Jim]

Hi,

first of all: great theme. Thanks!!

On my iPad 3 the menue does not work in portrait mode.
Tested it on your demo-site (asterialite.towfiqi.com) and on my site with Chrome and Safari.
If you click it nothing happens..

Can you help?

Cheers,
Jim

[Towfiq I.]

this is a known bug and will be fixed in the future version. Here is how to fix this:

Open up asteria.js and replace this:

if (jQuery(window).width() < 768) {
	//jQuery("#topmenu").attr("id","sidr");
	var padmenu = jQuery("#simple-menu").html();
	jQuery('#simple-menu').sidr({
      name: 'sidr-main',
      source: '#topmenu'
    });
	jQuery(".sidr").prepend("<div class='pad_menutitle'>"+padmenu+"<span><i class='fa-times'></i></span></div>");
	
	jQuery(".pad_menutitle span").click(function() {
		jQuery.sidr('close', 'sidr-main')
		preventDefaultEvents: false;
		
});
}

with this:

//jQuery("#topmenu").attr("id","sidr");
	var padmenu = jQuery("#simple-menu").html();
	jQuery('#simple-menu').sidr({
      name: 'sidr-main',
      source: '#topmenu'
    });
	jQuery(".sidr").prepend("<div class='pad_menutitle'>"+padmenu+"<span><i class='fa-times'></i></span></div>");
	
	jQuery(".pad_menutitle span").click(function() {
		jQuery.sidr('close', 'sidr-main')
		preventDefaultEvents: false;
		
});

and then add this to your custom css tab:

/*Hide the mobile menu on desktop*/
#sidr-main{ display:none;}

[Jim]

Thanks!!

Changed the asteria.js.
What do you mean by the custom css tab? I added it to the style.css but this did not help..

[Towfiq I.]

go to Asteria Options> Custom CSS

[Jim]

THANKS!!!
Works perfectly now.

[Juan Cholbi]

Sorry, how cam I open up the ASTERIA.JS?

[Towfiq I.]

Use this plugin:
http://wordpress.org/plugins/solid-code-theme-editor/

[Juan Cholbi]

Thank you.
I did all the steps right but it dosn’t work…
what can I do

[Towfiq I.]

did you clear your ipad browser cache? whats your site address?

[Juan Cholbi]

planetasonico.hval.es
OH YES! It is working now Thank you so much!

[Mickey Kay]

Hi there,

We’re experiencing this same issue, however the prescribed fix doesn’t work. It seems that if the logo text is long, and the header menu is long as well, this causes the menu to move below the logo at smaller screen sizes. Since the header height is set inline with jQuery (correct? if so, why is this necessary?), the menu just disappears entirely. The only way we’ve been able to fix this problem is by decreasing the logo/menu font size to save on horizontal space, however this seems like a pretty significant issue. Can I ask why you’re doing all this breakpoint detection and styling with jQuery? Any ideas on how to fix this? Thanks.

– MIckey

P.S. to reproduce this issue just add a bunch of items to your nav menu and make your site title pretty long, then resize and you’ll see how the CSS/jQuery falls apart at various widths.

[Towfiq I.]

can you remove this from javascript.php and see if it works or not:

jQuery(".header4").height(headheight)