Menu doesn't open on a tablet

Hi Argus,

We did notice this bug during development progress, and thought we had had fixed it. But seems like we didn't test it enough. Could you provide some more details on your bug encountering - your browser, browser version, screen shot... etc?

Thank you.

Dear Argus,

Also, did you test using our demo site? As there's one minor bug with our demo - you have to close the top bar in order for it to be responsive.

Thank you Argus,

The problem has been fixed. Please check the download package once again as we just updated it, most open issues were fixed along with some UI tuning.

Looking forward to your feedback!

Hi there, I've installed the latest version but am experiencing the same issue on my iPhone. Any suggestions for workarounds? Thanks!

Hello jaxxham,

Thank you for your information. Could you please let me know:

- Your version of device, browser
- Which theme you are using?
- Have you tried default config and check it before making any adjustment?

Thanks!

Hiya,

- I've tried it on Safari and Chrome on iOS.
- I'm using the latest version of the module with omega theme, which was having some issues with width until I applied this patch
- The error seems to occur when the "Always show submenu" is set to off.

Thanks for the reply

In TB megamenu WHEN click save button to make changes the process bar going in progress but changes not save.kindly help

Re: comment #9 - running into the same issue. Steps to reproduce:

1. Install latest Drupal 7
2. Install tb_megamenu (tried dev, 1.0-beta2, and even 1.0-alpha1 since that was the next release after the "fixed" note in comment #4 above).
3. Switch default theme to Seven, add hack of <meta name="viewport" content="initial-scale=1.0" /> to modules/system/html.tpl.php line 50 (so you see the mobile menu instead of mobile devices showing full page width)
4. Add a couple links to main menu with one having a drop-down sublink, then add TB menu block to Content block region of Seven theme
5. Load on iPhone 5s, iOS 7 and click on the menu - it shouldn't appear
6. Now click on the screen where the menu item with sublink should be appearing and you'll see the menu suddenly appear

I'm seeing this on iPhone 5s, iOS7. Not seeing it on iPhone 5, iOS 6. Not seeing it on iPad with iOS 7. Am seeing it on some Android tablets.

Ultimately, it seems like some hiccup caused by the use of height 0/auto and overflow hidden/visible. I finally switched JS and CSS to just use display none/block and that did the trick. However, I'm wondering if you lose CSS animation transitions - we aren't using these so don't know for sure, just a fair warning and the reason I'm only providing the patch details as a workaround and not actual patch.

 sites/all/modules/contrib/tb_megamenu/css/base.css        |  2 +-
 sites/all/modules/contrib/tb_megamenu/css/bootstrap.css   | 15 +++++++++------
 .../contrib/tb_megamenu/js/tb-megamenu-frontend.js        | 13 +++++++------
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/sites/all/modules/contrib/tb_megamenu/css/base.css b/sites/all/modules/contrib/tb_megamenu/css/base.css
index 3083677..805bab7 100644
--- a/sites/all/modules/contrib/tb_megamenu/css/base.css
+++ b/sites/all/modules/contrib/tb_megamenu/css/base.css
@@ -370,7 +370,7 @@
 }
 .tb-megamenu .collapse {
 	position: relative;
-	height: 0;
+/*	height: 0;*/
 	overflow: visible;
 	-webkit-transition: height .35s ease;
 	-moz-transition: height .35s ease;
diff --git a/sites/all/modules/contrib/tb_megamenu/css/bootstrap.css b/sites/all/modules/contrib/tb_megamenu/css/bootstrap.css
index 4701cb4..e6248ed 100644
--- a/sites/all/modules/contrib/tb_megamenu/css/bootstrap.css
+++ b/sites/all/modules/contrib/tb_megamenu/css/bootstrap.css
@@ -1685,8 +1685,9 @@
   width: auto;
 }
 .tb-megamenu .nav-collapse.collapse {
-  height: auto;
-  overflow: visible;
+  display: block;
+/*  height: auto;
+  overflow: visible;*/
 }
 .tb-megamenu .navbar .brand {
   float: left;
@@ -3142,8 +3143,9 @@
   }
 .tb-megamenu .nav-collapse,
 .tb-megamenu .nav-collapse.collapse {
-    overflow: hidden;
-    height: 0;
+    display: none;
+/*    overflow: hidden;
+    height: 0;*/
   }
 .tb-megamenu .navbar .btn-navbar {
     display: block;
@@ -3155,7 +3157,8 @@
 }
 @media (min-width: 980px) {
 .tb-megamenu .nav-collapse.collapse {
-    height: auto !important;
-    overflow: visible !important;
+    display: block !important;
+/*    height: auto !important;
+    overflow: visible !important;*/
   }
 }
\ No newline at end of file
diff --git a/sites/all/modules/contrib/tb_megamenu/js/tb-megamenu-frontend.js b/sites/all/modules/contrib/tb_megamenu/js/tb-megamenu-frontend.js
index e654f9b..7b3c7f4 100644
--- a/sites/all/modules/contrib/tb_megamenu/js/tb-megamenu-frontend.js
+++ b/sites/all/modules/contrib/tb_megamenu/js/tb-megamenu-frontend.js
@@ -5,12 +5,13 @@ Drupal.TBMegaMenu = Drupal.TBMegaMenu || {};
   Drupal.behaviors.tbMegaMenuAction = {
     attach: function(context) {
       $('.tb-megamenu-button').click(function() {
-        if(parseInt($(this).parent().children('.nav-collapse').height())) {
-          $(this).parent().children('.nav-collapse').css({height: 0, overflow: 'hidden'});
-        }
-        else {
-          $(this).parent().children('.nav-collapse').css({height: 'auto', overflow: 'visible'});
-        }
+        $(this).parent().children('.nav-collapse').toggle();
+//        if(parseInt($(this).parent().children('.nav-collapse').height())) {
+//          $(this).parent().children('.nav-collapse').css({visibility: 'hidden'});
+//        }
+//        else {
+//          $(this).parent().children('.nav-collapse').css({visibility: 'visible'});
+//        }
       });
       var isTouch = 'ontouchstart' in window && !(/hp-tablet/gi).test(navigator.appVersion);
       if(!isTouch){

could you explain how to apply the above patch? I have having the same issue and need a resolution asap.

Gentlemen,

I made several attempts to apply covenantd's suggested changes with no luck. He did point me in the right direction and I did end up getting it to work. I have generated a patch that I will be uploading shortly for your review. This patch is based on the latest commit to the 7.x-1.x branch of the git repository.

Stand by.

@seismicmike - Awesome to get a real patch going here!
@acrafts - @Argus pointed you in right direction for a normal patch, however with this module I'd honestly tend to just make these changes manually since they are so minor and it seems like the versions are pretty widely divergent. To make the changes manually follow along in the code to see which files it's working with and add the lines with a "+" sign in front, remove the lines with a "-" in front.

In the end, I added the lines you added, but didn't comment out the lines you commented out, and added the toggling between display: none and display: block to the CSS changes made by JavaScript when you click the menu in tb-megamenu-frontend.js

It works for me now on my iPhone 5s and my colleague's iPad (not sure what version).

PS. I'm not sure if my patch name follows Drupal conventions, so I apologize if it throws anyone off.

I confirm that patch #17 fixes the issue, can this be ported to the latest dev version.

Thanks

Thanks to #17 for saving my day! Confirming it works.

For me, the menu doesn't show only when 'Always Show Submenus' is set to 'No'. If its set to 'Yes' the un-patched megamenu is visible on iOS, but fully expanded.

Re-confirming that the patch in #17 fixes the issue. Thanks!

Patch #17 also fixed this for me. Four confirmed instances of this working. Changing to RTBC.

I'm also having a problem when the menu goes responsive. The responsive menu doesn't seems to open on any views/webform generated page, i've tested it on an iPad and iPhone. The strange thing is that when I resize a Safari browser the responsive menu does drop down, in Chrome though it's the same as on the mobile devices and the menu doesn't respond when clicking on the responsive icon. I've tried the latest Dev version and also applied the patch, but it made no difference. Great shame as the module has so much potential.

Glad to see my patch helped! Thanks for the feedback everyone.

I'm curious if you know of a way to get the menu to close when you click out of it on iPad (say in landscape orientation). Mine just stays open until I refresh. I can click other menus fine, but the last one I click just remains open. I was hoping clicking outside of the menu would close the menu.

Thanks,
Heidi

To follow up on my last comment, I think I was able to get iOS menus to close with this bit of code in my theme's custom js file #2285435: Closing menu on touch device

The modifications in this patch still work, and fixed my tb-megamenu drop-down menu issue on iOS 11.x devices -- at least on iPhones. I would be surprised if it did not also fix the issue on other Apple mobile products. TB-Megamenu worked fine on non-Apple mobile devices, desktops, and even on iPhones in 'Landscape' mode; it would not work, only when the iPhone was in 'Portrait' mode.

My software specifications:

• TB-Megamenu module version 7.x-1.0-rc2
• JQuery 1.10.2
• Drupal 7

I did not use the OS to 'install' the patch, I just manually updated the bootstrap.css and tb-megamenu-frontend.js files. The patch does not significantly change the base.css file. If your custom css file (global.css, style.css, etc.) references the .nav-collapse class, be sure that the file is NOT also applying the 'display: block [!important];' rule -- leave that to the updated bootstrap file of the tb-megamenu module. Finally, I had been working on this issue for several days, and one of the things I tried (unsuccessfully) was to assign a 'cursor: pointer;' rule to the nav-collapse class within my custom css file -- this also seems to have prevented the TB-Megamenu patch from working it's magic.

Kudos to seismicmike!

I had to make changes to the tb-megamenu-frontend.js file in addition to patch #17 above. Now my menu appears in portrait mode for iphone 6, iOS11. Before it took 3 taps to display the menu. Drupal 7.57, iOS 11, tb_megamenu Version: 7.x-1.0-rc2

@@ -22,24 +22,24 @@
       }
     }
   };
-  
+
   Drupal.behaviors.tbMegaMenuAction = {
     attach: function(context) {
-      $('.tb-megamenu-button', context).once('menuIstance', function () {
-        var This = this;
-        $(This).click(function() {
+      $('.tb-megamenu-button').click(function() {
+        $(this).parent().children('.nav-collapse').toggle();
           if(parseInt($(this).parent().children('.nav-collapse').height())) {
-            $(this).parent().children('.nav-collapse').css({height: 0, overflow: 'hidden'});
+            $(this).parent().children('.nav-collapse').css({height: 0, overflow: 'hidden', display: 'none'});
             Drupal.TBMegaMenu.displayedMenuMobile = false;
           }
           else {
-            $(this).parent().children('.nav-collapse').css({height: 'auto', overflow: 'visible'});
+            $(this).parent().children('.nav-collapse').css({height: 'auto', overflow: 'visible', display: 'block'});
             Drupal.TBMegaMenu.displayedMenuMobile = true;
           }
         });
-      });
-      
-      
+
+
+
+
       var isTouch = 'ontouchstart' in window && !(/hp-tablet/gi).test(navigator.appVersion);

Drupal 7 is no longer supported. If this applies to a supported version, please move it there.