-
Posts
-
I started a post about this problem a while back, but it seems to have been dropped from attention.
https://kriesi.at/support/topic/full-width-menu-on-ipad-drop-down-anchor-menu-sticks-open-after-selection/To restate: On iPad, dropdown menus are persistent and do not disappear from view when tapping away. Also, on some pages the drop down menus trigger top menu item immediately (you can see the drop down just popping up as the page is navigated away to top menu item destination).
I’ve tried the fixes suggested in the support post above, but no luck.
btw my url and logins have changed, see below.Hi jimmymoto!
Thank you for using Enfold.
Sorry for the delay. We closed the other thread. Please try to update the theme to the latest version then deactivate all plugins. Remove browser cache before checking the page on iPad.
Cheers!
IsmaelHey!
Edit the Fullwidth Sub Menu element then set the Mobile Menu Display to display a button instead of the default menu layout. I suggested this again because it will create a mobile button, when tap, list all the menu items without a sub menu.
Cheers!
IsmaelPerhaps the problem is that I am not getting a menu button on iPad as the settings would suggest (although I would not prefer this since all menu items fit nicely in 1 row anyway). I found that if I set Mobile Menu Display to “Display a button to open menu” the full-width menu still displays as a row on iPad, and I am immediately brought to the top menu item destination when I try to tap open the menu (the menu will drop down, but by then the page is already changing).
On iPhone, I see a menu button as expected and everything works great.If I set Mobile Menu Display to “Display full menu” then the drop-down activates on iPad without navigating away, however I can’t”tap-off” and menu stays stuck open until I click another menu.
On iPhone, the behaviour is the same as iPad, except that there are multiple menu rows (not really a problem) and drop-downs show up behind top-level menu items (can’t select, big problem).The “Display a menu button” option would be ideal if it wasn’t for the iPad constantly navigating away when trying to tap open the menu.
I’ve tried adding this code to my functions.php as you suggested in the original thread, but no change in behaviour:
add_action('wp_footer', 'ava_close_submenu'); function ava_close_submenu(){ ?> <script> (function($){ $('.av-subnav-menu li > ul a').click(function() { $('.av-subnav-menu').removeClass('av-open-submenu'); }); })(jQuery); </script> <?php }Hi!
Thank you for the info. Please remove the code on functions.php file then add this in the Quick CSS field:
@media only screen and (max-width: 1024px) { .responsive #top .sticky_placeholder{height:0px;} .responsive #top .av-submenu-container{top: auto !important; position: relative !important; height:auto; } .responsive #top .av-menu-mobile-active {text-align: center; } .responsive #top .av-menu-mobile-active .mobile_menu_toggle{display: inline-block;} .responsive #top .av-menu-mobile-active .av-subnav-menu{display:none;} .responsive #top #wrap_all .av-menu-mobile-active.container {width:100%; max-width: 100%;} .responsive #top .av-menu-mobile-active .av-open-submenu.av-subnav-menu{display:block;} .responsive #top .av-subnav-menu > li:first-child{margin-top:-1px;} .responsive #top .av-menu-mobile-active .av-subnav-menu li{display:block; border-top-style: solid; border-top-width: 1px; padding:0;} .responsive #top .av-menu-mobile-active .av-subnav-menu > li > a{border-left:none; padding:15px 15%; text-align: left;} .responsive #top .av-menu-mobile-active .av-subnav-menu > li a:before{content: "\25B6"; position: absolute; top: 15px; margin-left: -10px; font-family: 'entypo-fontello'; font-size: 7px;} .responsive #top .av-menu-mobile-active .av-subnav-menu li > ul{visibility:visible; opacity: 1; top:0; left:0; position: relative; width:100%; border:none;} .responsive #top .av-menu-mobile-active.av-submenu-hidden .av-subnav-menu li > ul{display: none;} .responsive #top .av-menu-mobile-active.av-submenu-hidden .av-subnav-menu li > ul.av-visible-sublist{display: block;} .responsive #top .av-menu-mobile-active .av-subnav-menu li > ul a{padding:15px 19%;} .responsive #top .av-menu-mobile-active .av-subnav-menu li li > ul a{padding:15px 24%;} .responsive #top .av-menu-mobile-active .av-subnav-menu li li li > ul a{padding:15px 29%;} }It will enable the mobile button on iPad view.
Regards,
IsmaelThis functions great, but the mobile button is not preferable on iPad since it takes up between 75% of the screen when opened (nearly 300% if all menu items are revealed). Ironically, this method also does not allow users to select the top item in menu (selecting top item closes mobile menu instead).
The regular full-width menu with items arranged neatly in a line is much more elegant.
Are you sure there is no way to get these full-width menu drop downs to simply “tap-off” without having to resort to a mobile menu?Hi,
I checked your menu on ipad mini/chrome and yes, when clicking a parent it will show/hide the children attached to it but that is the default behaviour. Did you check the Hide Mobile Menu Submenu Items under Enfold–>Header–>Mobile Menu?
Thanks,
RikardHi Rikard,
The problem is that the drop down menus cannot be closed/disengaged/tapped-off unless user taps another menu (which also sticks open).
This is a problem on all my menus throughout the site, not just full-width. I use a mega menu in my main menu and it blocks the whole screen and cannot be disengaged on iPad (haven’t tested Android yet).Ismael’s solution is a work-around, but is not ideal since the mobile menu button kills the elegance of your full-width menus and takes up most or all of the screen. Also, the problem with the mega menu remains.
I should reiterate that ALL drop down menus fail to disengage/tap-off, not just full-width menus. This is the core problem for me here. Perhaps I have something conflicting in my quick css or custom.css, but I cannot figure it out.
I originally thought the problem might be with my suite of Geodirectory plugins, but I have tested with all plugins deactivated and the problem remains.Hey!
OK. Let’s focus on the page above. This is just a workaround and not an actual fix. What if the parent menu item “Going Out” is not a link so it doesn’t reload the page every time you tap on it. Just put “#” symbol to make it a static link. You can create another set of links containing parent menu items (Going Out, Shopping, Servcices etc). If you remove the link of the parent menu items, you can tap on it to show the sub menu items then tap outside the sub menu container to close it.
Best regards,
IsmaelHi,
i found a solution for this problem.
$('.main_menu ul li ul li a').on('touchend', function() { $(this).parents('ul.sub-menu').delay(1000).animate({opacity: 0,},300,function() {$(this).css('visibility', 'hidden');}) });The submenu is closing properly on touch devices like iPad (window width > 767) on my page:
https://www.secure-data-space.com/en/product/features/The problem is, that the highlighted menu item is not right, it shows always the previous menue item.
On desktop computers everything is fine.Can anyone help me?
Thanks, TJ
Do you have a better fix to this issue that doesn’t cause a side effect on an iPhone and other mobile devices where the submenu disappears when it shouldn’t?
This was my workaround (which incorporates BugfreeSystems’ solution above):
const iPadMenuFix = function() { $(this).closest('ul.sub-menu').delay(1000).animate({opacity: 0,},300, function() { $(this).css('visibility', 'hidden'); }) }; $('#avia-menu').find(".menu-item-has-children.current-menu-item a").on('touchend', iPadMenuFix); console.log($('#avia-menu').find(".menu-item-has-children.current-menu-item a")); $('.av-burger-menu-main a').on('avia_burger_list_created', function() { //had to add a delay because the 'avia_burger_list_created' event fires before the #av-burger-menu-ul element is created setTimeout(function(){ $('#av-burger-menu-ul').find("a").off('touchend', iPadMenuFix); console.log('#av-burger-menu-ul'); console.log($('#av-burger-menu-ul').find("a")); }, 200) });Hi!
Can we take a look at the site? We need to inspect the elements again because this is a very old issue and I”m not really sure if the behavior is still the same. Please make sure that the site is running on Enfold version 4.5.2.
Regards,
Ismaeli have a similar problem – if the anchor-links in menu are submenu items in the dropdown.
Ipad – on ipad i have on landscape mode often the nicer main menu to see and not the hamburger.i can open the dropdown menu on ipad but after scrolling to the anchor the submenu does not close.
i tried this in functions.php:
function add_touch_fix(){ ?> <script> (function($){ $(document).ready(function(){ $('.avia_mobile .main_menu ul .dropdown_ul_available .sub-menu li a').on('click touchend', function() { $(this).closest('.sub-menu').css({ "opacity" : "0", "visibility" : "hidden", }); }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'add_touch_fix');but it does not do the trick. Even with a timeout function it does not work – any advice?
this https://kriesi.at/support/topic/ipad-drop-down-menu-wont-tap-off/#post-1047074
works but has on mega-menu wrong behavior – because it hides the closest menu which is on most cases a second-level menu under mega-menu
see link on privage contenti tried this first to see if i could be specific only to non mega-menu issue:
function add_touch_fix(){ ?> <script> (function($){ const iPadMenuFix = function() { $(this).closest('ul.sub-menu').delay(1000).animate({opacity: 0,},300, function() { $(this).css('visibility', 'hidden'); }) }; $('#avia-menu').find('.menu-item-has-children:not(.menu-item-mega-parent).current-menu-item a').on('touchend', iPadMenuFix); console.log($('#avia-menu').find('.menu-item-has-children:not(.menu-item-mega-parent).current-menu-item a')); })(jQuery); </script> <?php } add_action('wp_footer', 'add_touch_fix');but it does not exclude the sub-menu hide on mega-div
a little effort:
$('#avia-menu').find('.menu-item-has-children:not(.menu-item-mega-parent).menu-item-top-level.current-menu-item .sub-menu a').on('touchend', iPadMenuFix);i placed another class to the selector so the mega-div does not hide the sublevel ul’s on touch now – but now we had to find a method to close the mega-div on touch any link in it !
maybe a toggle of the dynamically set of open-mega-a class could help…
- You must be logged in to reply to this topic.