Tagged: , ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • February 4, 2014 at 11:59 am #219288
    AdDesign

    Hi,

    I disabled the responsive layout in the theme options. The page looks at first sight on mobile devices ok. But when I try to zoom the page, it shifts the header navigation (main menu) or it disappears completely (tested on ipad, samsung note 2).

    Can you please give me some advise?

    Best regards,

    Alex

    February 4, 2014 at 4:41 pm #219446
    Yigit

    Hey AdDesign!

    Can you post the link to your website so we can take a look?

    Cheers!
    Yigit

    February 4, 2014 at 6:22 pm #219537
    jrevillini

    I’ll post mine, as I have the same issue: http://medcruiters.us

    February 4, 2014 at 6:25 pm #219538
    jrevillini

    oh, and for me, i have not modified the stock field value regarding responsive. i also am not doing anything with zoom level in either safari or chrome for the iphone 4s with iOS 7, yet i am missing header nav and slideshow.

    WP 3.8.1
    Enfold 2.4.5

    February 4, 2014 at 6:37 pm #219547
    AdDesign
    This reply has been marked as private.
    February 4, 2014 at 6:43 pm #219554
    Ismael

    Hi!

    Have you tried adding this on Quick CSS?

    @media only screen and (max-width: 989px) {
#mobile-advanced, .mobile_active.mobile_menu_tablet #advanced_menu_toggle {
display: block;
}
}

    Regards,
    Ismael

    February 4, 2014 at 7:00 pm #219567
    jrevillini

    Added that, but if you look at the CSS generated, the @media block is showing up after some other css in the same HTML block. I thought that @ directives need to be at the top to have an effect. or maybe that’s just @import. i don’t know, but either way, it didn’t affect it on my mobile device. Here’s the CSS that was generated, yet I only pasted what you sent me into the box. the above stuff is coming from somewhere else.

    
<style type="text/css" media="screen">
	html { margin-top: 32px !important; }
	* html body { margin-top: 32px !important; }
	@media screen and ( max-width: 782px ) {
		html { margin-top: 46px !important; }
		* html body { margin-top: 46px !important; }
	}
</style>
    February 4, 2014 at 7:04 pm #219570
    jrevillini

    FYI tried adding it to custom.css since I found an @media thing ready to go. Change took, but no diff on mobile: https://medcruiters.us/wp-content/themes/enfold/css/custom.css?ver=1

    February 4, 2014 at 7:23 pm #219582
    Devin

    Hey!

    Try this:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
  .responsive .mobile_menu_tablet .main_menu {
  display: block;
  }
}

    We’ll need to adjust the theme for the next update as its a bug but this should be a quick-fix.

    Cheers!
    Devin

    February 4, 2014 at 7:37 pm #219586
    AdDesign

    Hi Devin,

    I’ve tried the recommended CSS’s but unfortunately both don’t work.

    Regards,

    Alex

    February 4, 2014 at 11:11 pm #219688
    jrevillini

    Same here – no change. Is there a plugin for chrome for iPhone to inspect the element and see what styles are operative?

    February 4, 2014 at 11:28 pm #219694
    Devin

    @jrevillini – can you try refreshing a few times. Seems to have fixed it when viewing on my end.


    @AdDesign     – Looks fixed on my end as well though the menu is now overlapping so changing the switch width with this tut should help you (increase the pixel width at which the nav menu switches): http://kriesi.at/documentation/enfold/change-when-mobile-menu-appears/

    February 4, 2014 at 11:30 pm #219695
    jrevillini

    HEY I FREAKING FIGURED IT OUT:

    Javascript error that was only triggered in iOS Webkit.

    I believe it’s still true that Chrome and Safari on iOS are Webkit-based, even though Chrome went to it’s own base some time ago on other platforms.

    So in my case, I had some jQuery javascript which was causing only an error on iOS webkit browsers. The desktop browsers must be more forgiving. The bad code was a selector. I had

    $('head link[id^=pau').appendTo('head'); // note the missing close bracket in the attribute selector

    Shoulda been

    $('head link[id^=pau]').appendTo('head'); //happy

    So the only way for me to debug it was by following these instructions to enable web inspector for Safari on iOS: http://stackoverflow.com/questions/11262236/ios-remote-debugging/12607124#12607124

    I’d start by making sure any site with this issue has no JS errors ON THE DEVICE, since that’s going to impact the slideshow and nav.

    • This reply was modified 10 years, 9 months ago by jrevillini. Reason: adding formatting
    February 5, 2014 at 12:09 am #219705
    Devin

    Glad you were able to figure that out :)

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Header navigation (main menu) disappears on mobile devices’ is closed to new replies.