Menu does not work when you change from Mobile to Desktop mode

[mcspronko]

Preconditions

Magento 2

Steps to reproduce

1. Create Parent category, and sub-category as part of the parent in Admin
2. Navigate to frontend.
3. Observe newly created category on desktop browser.
4. Resize browser to be mobile (width < 760px)
5. Resize browser back to be show full menu.
6. Click on any of the top level category links from the menu.

Expected result

1. User should be redirected to a page with link provided from Category url-key clicked in menu.

Actual result

1. Nothing happens.

[ghost]

Synopsis

• File affected /lib/web/mage/menu.js
• The issue is that the _on event binded in _toggleMobileModeis never unbinded.

Possible fix

Unsubscribe _off event in _toggleDesktopMode method as follows:

...
_toggleDesktopMode: function () {
   this._off(this.element, 'click');
...

[veloraven]

@mcspronko thank you for your report.
Please specify Magento version used.

[mcspronko]

Magento 2.1

[guz-anton]

The internal issue was created MAGETWO-59327.

[magento-engcom-team]

@mcspronko, thank you for your report.
We were not able to reproduce this issue by following the steps you provided. If you'd like to update it, please reopen the issue.
We tested the issue on 2.3.0-dev, 2.2.0, 2.1.9

[patrickwachira510]

I am having the same issue with Magento 2.2. Sub menu works on desktop mode but not mobile. wachirawines.com

[chris-pook]

This is very much still an issue and easily replicable in Chrome 68 and Firefox 61:

• On a Magento2 site with categories setup, browse to any page in > 767px window size.
• Reduce the window size down, so that the mobile menu appears.
• Bring the window size back up above 767px.
• Try to click any of the top level category links from the menu.

I am certainly seeing this in 2.2.3 and 2.2.5.

[ghost]

@chris-pook, thank you for the update.
We've acknowledged the issue and added to our backlog.

[emanuelarcos]

@magento-engcom-team give me 2.2.6 instance

[magento-engcom-team]

Hi @emanuelarcos. Thank you for your request. I'm working on Magento 2.2.6 instance for you

[okorshenko]

@magento-engcom-team give me 2.2.5 instance

[magento-engcom-team]

Hi @okorshenko. Thank you for your request. I'm working on Magento 2.2.5 instance for you

[magento-engcom-team]

Hi @okorshenko, here is your Magento instance.
Admin access: https://i-5402-2-2-5.engcom.dev.magento.com/admin
Login: admin Password: 123123q
Instance will be terminated in up to 3 hours.

[emanuelarcos]

@magento-engcom-team give me 2.2-develop instance

[magento-engcom-team]

Hi @emanuelarcos. Thank you for your request. I'm working on Magento 2.2-develop instance for you

[magento-engcom-team]

Hi @emanuelarcos, here is your Magento instance.
Admin access: https://i-5402-2-2-develop.engcom.dev.magento.com/admin
Login: admin Password: 123123q
Instance will be terminated in up to 3 hours.

[sidolov]

Hi @mcspronko. Thank you for your report.
The issue has been fixed in #17990 by @emanuelarcos in 2.2-develop branch
Related commit(s):

• 6eab39a6384fdf603c1aa6d3208749856da7fd6e

The fix will be available with the upcoming 2.2.8 release.

[ghost]

Best,

Magento 2.3.2

Edit /lib/web/mage/menu.js
Add a empty line under $(this.element).off('mouseenter mouseleave click');
So between Line 484 and line 486 Line 485 must be empty to keep it simple.
And the mobile menu is working on magento 2.3.2
Seems 1% is testing there mobile site so this can be useful.

481 _toggleDesktopMode: function () {
482 var categoryParent, html;
483
484 $(this.element).off('mouseenter mouseleave click');
485 -->empty line
486 this._on({
487 /**
488 * Prevent focus from sticking to links inside menu after clicking

[stercodigitex]

Primarily this issue comes with any of JS conflict or base path definition in settings. If everything is fine, then you need to do hack like this. Jump into code and you will find the culprit. In my case - I have removed and add

structure to re-form the menu.
It works !!

If you are not able to do, please follow/connect me on twitter @rammohan4b