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.
-
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.– kookaburraSep 27, 2022 at 18:55
3 Answers
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');
}
}
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
This issue does exist in the recently released Magento 2.4.5 version.
Steps to reproduce this issue and temp fix in mobile view:
- 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.
- Then go to the site and make sure it is dev tools opened in mobile view.
- Then click on the category menu "Women" and it will not open.
- 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.
- Please check the screenshots of the category menu showing.
After fix
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.
-
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? 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. Sep 28, 2022 at 13:57
-
It's helpful. But this doesn't work well. Is there any other solution? Sep 28, 2022 at 14:12
-
Hey Bharath, How to fix it? Please let me know. You described only in dev tools. Sep 28, 2022 at 15:20
-
Hi @WangGang, please allow me some time as I have to work this out.Thanks Sep 29, 2022 at 5:58