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. Commented Sep 27, 2022 at 18:55

3 Answers 3

Reset to default
3

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
  • Thats working, Thanks Commented Nov 3, 2022 at 12:46
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? Commented 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. Commented Sep 28, 2022 at 13:57
  • It's helpful. But this doesn't work well. Is there any other solution? Commented Sep 28, 2022 at 14:12
  • Hey Bharath, How to fix it? Please let me know. You described only in dev tools. Commented Sep 28, 2022 at 15:20
  • Hi @WangGang, please allow me some time as I have to work this out.Thanks Commented Sep 29, 2022 at 5:58

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.