Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • January 31, 2015 at 12:24 am #388639
    pozza

    Hi there – I have a mega menu set-up which works well – however on an iPad once the menu is open it won’t close if you decide to stay on the current page and tap elsewhere on the page.

    Is it possible to make the mega menu close by tapping away from the menu on an iPad?

    Obviously the menu closes itself on a desktop since it’s a roll-over function but on the iPad I can’t find a way to close the menu without clicking a link to move away from the page.

    Hope you can help?

    February 2, 2015 at 2:48 pm #389324
    Yigit

    Hey pozza!

    Can you please post the link to your website so we can see the issue?

    Cheers!
    Yigit

    February 2, 2015 at 11:52 pm #389749
    pozza

    Hi Yigit,

    You can actually see this happening on your own demo site: http://kriesi.at/themes/enfold/

    Have a look on an iPad (I have iPad 2) – If you tap “Shortcodes” the Mega Menu expands but the menu won’t close unless you leave the page. I think the menu should close if you tap somewhere else on the page away from the menu or if you tap on Shortcodes again. Otherwise if you want to stay on the page, the content is blocked by the mega menu that’s now stuck open!?

    I hope this makes sense? I imagine there’s some code that can recognise a tap elsewhere on screen and close the menu??

    And thanks for your help…

    February 3, 2015 at 11:40 am #389989
    Munford

    I am having the same problem after the recent update.

    • This reply was modified 9 years, 9 months ago by Munford.
    February 10, 2015 at 1:32 am #393445
    Yigit

    Hi!

    Can you please try adding following code to Functions.php file in Appearance > Editor

    function add_custom_megamenu(){
?>
<script>
jQuery(window).load(function(){
  if (jQuery(window).width() <= 990){	
    jQuery(".avia_mega_div").click(function(){
        jQuery(".avia_mega_div").toggle();
    });
  }
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_megamenu');

    Best regards,
    Yigit

    February 10, 2015 at 2:28 am #393448
    pozza

    Hi Yigit,

    Thanks for your reply but I must be doing something wrong – this has made no difference at all. Mega menu won’t close if tapping on another area of the page (iPad 2). It closes if you click another link or toggle/accordian but not if you ‘tap’ elsewhere on the page to close menu and keep reading content??

    February 10, 2015 at 1:04 pm #393642
    Yigit

    Hey!

    Can you please post the link to your website?

    Cheers!
    Yigit

    February 10, 2015 at 1:08 pm #393649
    Munford

    http://andes-world-travel.flywheelsites.com/climbing/

    I have a mega menu on the site at the top,
    and have added the code to so I can use a different menu on mobiles, since I was not able to access all the levels of the menu (only the last level links were actually available as links). I am not seeing the correct mobile menu now, maybe due to all the trouble I am having with my theme options not displaying correctly. I have cleared all caches, many times, and have contacted flywheel, but am still seeing problems after the last update.

    thanks
    Nancy

    • This reply was modified 9 years, 9 months ago by Munford.
    February 11, 2015 at 11:39 am #394226
    Yigit

    Hi!

    Can you please change the code to following one 

    function add_custom_megamenu(){
?>
<script>
jQuery(window).load(function(){
  if (jQuery(window).width() <= 990){	
    jQuery("#header").click(function(){
        jQuery(".avia_mega_div").toggle();
    });
  }
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_megamenu');

    Best regards,
    Yigit

    February 11, 2015 at 12:06 pm #394242
    pozza

    Okay, so it works (closes menu) if you tap on an image anywhere on the page – but not if you tap on text or background colour area.
    Looks like the ‘toggle’ function is working but it’s trying to target when someone taps (clicks) outside of the header area – or taps somewhere inside #main ??

    February 12, 2015 at 10:18 pm #395380
    Yigit

    Hey!

    Unfortunately i do not have an actual tablet to try the code before posting it. Since we are getting there, could you please try following code as well? Please replace the code with following

    function add_custom_megamenu(){
?>
<script>
jQuery(window).load(function(){
  if (jQuery(window).width() <= 990){	
    jQuery("*").click(function(){
        jQuery(".avia_mega_div").hide();
    });
  }
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_megamenu');

    Best regards,
    Yigit

    February 13, 2015 at 1:27 am #395462
    pozza

    Yes – this is now working if the window width in the code is set to <=1024

    Thank you very much for your help and patience – much appreciated.

    Cheers

    February 13, 2015 at 11:54 am #395597
    Yigit

    Hey!

    Great!
    You are welcome, glad we could help :)
    For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
    For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Closing Mega Menu on iPad’ is closed to new replies.