In mobile view, main menu and user account menu overlapped

Created on 19 April 2024, 2 months ago
Updated 18 June 2024, 5 days ago

Problem/Motivation

To address the issue of the main menu and user account menu overlapping in mobile view, as well as improve the styling for multilevel menu

menu overlapped

multilevel menu

Need better style

Steps to reproduce

1) install them and make it default
Goto home page and open in mobile view and see the issue

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

RTBC

Version

1.0

Component

Code

Created by

🇮🇳India Gautam_105@

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @Gautam_105@
  • Assigned to adarshv
  • Issue was unassigned.
  • First commit to issue fork.
  • 🇮🇳India kaaarrrtik

    kaaarrrtik changed the visibility of the branch 3442029-in-mobile-view to hidden.

  • Assigned to Tirupati_Singh
  • Issue was unassigned.
  • Status changed to Needs review 5 days ago
  • 🇮🇳India Tirupati_Singh

    Hi @adarshv, I've fixed the theme navigation menu design issue for responsive devices. Please review the changes. Attaching the screenshots reference for the navigation menu design fixes for responsive devices.

  • Status changed to Needs work 5 days ago
  • Hi, I have reviewed MR!35
    The overlapping of the hamburger menu and user account menu has been fixed for mobile responsiveness.
    The styling of the multi-level menu has also been improved. It is now appearing in a single line, but it would be better if it displayed step-by-step for a better user experience.
    Additionally, there is an issue with the multi-level menu in the mobile view, it briefly opens and then disappears this needs to be fixed.
    So changing the status to Needs Work.
    Thankyou.

  • Assigned to Tirupati_Singh
  • Issue was unassigned.
  • Status changed to Needs review 5 days ago
  • 🇮🇳India Tirupati_Singh

    @nisha_j, please add more menu items under Home menu to display it in step-by-step. I've noticed that you have created a multi-level menu with only one child and nested menu inside the first child, that's why the menu is being rendered in a single line instead of step-by-step. The step-by-step menu level will render only when the menu will have more than a single child and nested child within it.

    The multi-level menu in mobile devices open when the user hovers over a menu item and when the focus remove from that menu item the menu disappears. The menu design is due to the hover effect added on menu item. The child menu will render only when the user hover over the menu item and disappears when focus is removed from the menu item. If we design menu in such a way that, on hovering the menu item the menu item child menu will be pushed below the menu item being hovered the menu bar view port. This will expand menu length leading in addition of a scrollbar for menu items and this won't be better for the menu item for mobile devices.

    I'm attaching screenshots for reference and changing the status to Needs Review.

  • Status changed to RTBC 5 days ago
  • Hi, @Tirupati_Singh I have verified the issue by adding more menu items under the main menu, and it is now working fine. Regarding the multi-level menu in mobile view, I understand the points mentioned.
    So changing the status to RTBC
    Thanks

Production build 0.69.0 2024