Mobile Menu Behavior at Incorrect Breakpoint

[CNanninga]

The mobile menu JS behavior does not trigger at the same breakpoint as the mobile menu styles.

Preconditions

Magento 2.1.3

Steps to reproduce

Having active top-level categories and second-level categories in the main nav is sufficient.

Expected result

When at the breakpoint where the mobile styling for the main menu is applied (767px) - i.e., the "hamburger" menu with the slide-out - the mobile interaction behavior on the menu should also be applied. Specifically, in two respects:

1. Expanding a top-level category should be on a click/tab interaction, not hover.
2. An "All {Category Name}" item should be inserted as the first item under each top-level category.

Actual result

The behavior mentioned is not exhibited between 640px and 767px. Top-level categories still expand on a hover interaction, and no "All {Category Name}" item is present. This behavior only happens under 640px.

[patruvlad]

The JS for the menu that has that functionality can be found in lib/web/mage/menu.js if you look at line 42, you'll find media: '(max-width: 640px)' this tells the js the breakpoint for mobile functionality. To override this file you have to create the folder structure in your theme ex: [Namespace]/[theme_name]/web/mage/menu.js and change that breakpoint as you wish ex media: '(max-width: 768px)' with this you tell the Js script that the max window width for the mobile menu functionality is 768px.

[CNanninga]

Right. The point of this issue is that the default value in that JS file should not be 640px. The default value should match the default break-point at which the mobile menu styling takes over.

Would've actually submitted a PR to do this very thing, but it looks like this section of the JS is different in develop than in the most recent release. So maybe the fix for this issue is already on it's way.

[Igloczek]

It's already fixed on develop - commit

[RomanKrut]

@CNanninga Hello! Can you check your problem again on the latest version of Magento2?

[veloraven]

According to contributor guide, tickets without response for two weeks should be closed.
If this issue still reproducible please feel free to create the new one: format new issue according to the Issue reporting guidelines: with steps to reproduce, actual result and expected result and specify Magento version.

[bobemoe]

Almost fixed by that commit! Although this is better, there is still a 1px gap where this happens.

• At 767 main nav is hidden and mobile/burger menu is visible (GOOD)
• At 768 main nav is visible and mobile/burger menu is hidden (GOOD) but dropdowns don't work on hover and the "All *" items is present. (BROKEN)
• At 769 main nav is visible and mobile/burger menu is hidden, dropdowns work on hover and dont contain "All *" items (GOOD)

UPDATED: correct mistakes in visible/hidden descriptions

[bobemoe]

Fixed for me by:

diff --git a/lib/web/mage/menu.js b/lib/web/mage/menu.js
index 7533edd5..4e28b9e1 100644
--- a/lib/web/mage/menu.js
+++ b/lib/web/mage/menu.js
@@ -22,7 +22,7 @@ define([
             showDelay: 42,
             hideDelay: 300,
             delay: 0,
-            mediaBreakpoint: '(max-width: 768px)'
+            mediaBreakpoint: '(max-width: 767px)'
         },
 
         /**

[bobemoe]

@veloraven not sure preferred workflow, should I create new issue?

[hostep]

@bobemoe: can you send in a Pull Request with your suggested fix? That is probably the easiest to get it resolved quickly. Thanks! 🙂