1

The Magento version is the latest version 2.4.5. The menu is working well on desktop and actual mobile devices. But when I load the site in mobile view, the menu doesn't work well. If I click the parent item, it doesn't show the sub-menu and I can't go to another category page. And if I change the mode from mobile to desktop and back to mobile, then it works. Please let me know if there's any solution. Thanks for your help.

Improve this question
1
  • Does it do this in every browser you've tried? I've noticed that Chrome's cache can be sticky when switching views. I'd be curious whether or not reloading the page while in the broken mobile view fixes anything. Regardless, this sounds like a browser tools problem, not a Magento problem.
    – kookaburra
    Sep 27, 2022 at 18:55

3 Answers 3

Reset to default
2

I think this doesn't work in 2.4.5. First, you have to rewrite the menu.js. So I added the below code to _toggleMobileMode in menu.js

'click .ui-menu-item:has(a)': function (event) {
                        var target;

                        event.preventDefault();
                        target = $(event.target).closest('.ui-menu-item');
                        if (target.has('.ui-menu').length) {
                            this.expand(event);
                        }
                        target.get(0).scrollIntoView();

                        if (!target.hasClass('level-top') || !target.has('.ui-menu').length) {
                            window.location.href = target.find('> a').attr('href');
                        }
                    }
Improve this answer
1
2

This is a known issue with Magento 2.4.4 and 2.4.5. I confirmed the following workaround works on Magento 2.4.5

Add this._toggleDesktopMode();
to lib/web/mage/menu.js to _init method right before line mediaCheck({

Reference link: https://github.com/magento/magento2/issues/35329#issuecomment-1139618176

Improve this answer
1

This issue does exist in the recently released Magento 2.4.5 version.

Steps to reproduce this issue and temp fix in mobile view:

  1. If you have a desktop with a browser will be helpful since we need to change the CSS properties from the dev tools of the browser.
  2. Then go to the site and make sure it is dev tools opened in mobile view.
  3. Then click on the category menu "Women" and it will not open.
  4. Find for the class "level0 submenu ui-menu ui-widget ui-widget-content ui-front" like I have attached in the below screenshot and change that display mode from "none" to "block" and the below category will be visible now.
  5. Please check the screenshots of the category menu showing.

enter image description here

After fix

enter image description here

If this post helped you , please do give a like as this helps me to answer more , if you need this solution in code level please do the same and comment below.

Improve this answer
5
  • Yes, right. If I change the display property to block in inspect window, then it will work. But how can I fix it? Do you mean, to change the display property in jquery?
    – Aaron Wang
    Sep 28, 2022 at 13:42
  • Yes @WangGang we can do that also, i.e when this selector is clicked we have to change the display property from none to block using jquery.
    – Bharath Kumar J
    Sep 28, 2022 at 13:57
  • It's helpful. But this doesn't work well. Is there any other solution?
    – Aaron Wang
    Sep 28, 2022 at 14:12
  • Hey Bharath, How to fix it? Please let me know. You described only in dev tools.
    – Aaron Wang
    Sep 28, 2022 at 15:20
  • Hi @WangGang, please allow me some time as I have to work this out.Thanks
    – Bharath Kumar J
    Sep 29, 2022 at 5:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.