Sub-Menu Panels Stay Open & Overlap Upon Clicking

  • thecomputernoob · Member ·

    Greetings!

    On sub-menus of the navigation menu, I feel there is an issue:

    There is an overlap of the sub-menus when another any element from a prior sub-menu has been clicked. The previously clicked sub-menu does not automatically close as it typically would upon un-hovering), and it looks as in this image: https://ibb.co/j3zZMC7

    Please note that this is only upon clicking an element inside a previous sub-menu. Just hovering has no issues.

    Could something please be done about this?

    Thanks!

    The blog I need help with is: (visible only to logged in users)

  • tarasdashkevych · Theme Author ·

    Hello,
    Thank you for reporting it.

    The theme displays sub-menus when the menu item is selected for accessibility purposes, so it’s possible to navigate the menu with a keyboard only.

    I can see that this issue happens on the menu items without a valid link (in your case, it’s “#”).

    I am not sure if there is an easy fix but please try this custom CSS:

    
.menu-item > a[href="#"] {
  pointer-events: none;
}

    If it works then this fix will be included in the next theme update.

    Also, it should be possible to fix this specific issue by editing the existing links in the menu.

    “#” should be included in the menu link when adding it to the site menu because WordPress does not allow to add links without URL. Once the menu link is added, it’s possible to modify URL of the link, meaning you can remove “#” from the link.

    Please let me know if you have any additional questions.

    Kind regards,
    Taras

  • thecomputernoob · Member ·

    I was sticking with “#” since it seemed like convention to me as I have seen this on a majority of websites, but removing the “#” works too! However, now, hovering the mouse pointer over these empty links does not show the regular “click” pointer, but just a text cursor.

    With your provided CSS, this is fixed as it then shows as an arrow (still not a “click” pointer though, but better). However, this still does not fix the initial issue of the previous sub-menu staying open after an element of it has been clicked.

    In the previously attached image, you can see the overlap. That happened due to middle-mouse-button-clicking on one of the elements from the previous sub-menu panel (to open it in a new tab) and then hovering over to a new sub-menu panel, displaying its content on top of the previous one while the previous one is still there.

  • tarasdashkevych · Theme Author ·

    “…but removing the “#” works too! However, now, hovering the mouse pointer over these empty links does not show the regular “click” pointer, but just a text cursor…”
    – Could you please try also add this custom CSS (if it works then this fix will be included in the next theme update)?

    
.main-navigation a:not([href]) {
  cursor: pointer;
}

    I’ve tested this solution on my local machine and it seems to work.

    Kind regards,
    Taras

  • thecomputernoob · Member ·

    This fixes the pointer, sure; but my actual, initial issue is of the overlapping “stuck” sub-menu panel. Could anything be done regarding that?

  • tarasdashkevych · Theme Author ·

    “Could anything be done regarding that?”
    – Currently, the only way to fix it is to:

    1) Remove “#” from the links in the menu;
    2) Add this custom CSS to have the pointer in the menu links without URL:

    
.main-navigation a:not([href]) {
  cursor: pointer;
}

    Kind regards,
    Taras

  • thecomputernoob · Member ·

    Yes, this is what I have already tried and it has not worked against the persisting open sub-menu panel. I removed the “#” from all the links in the menu and added the given CSS; no dice.

  • tarasdashkevych · Theme Author ·

    “I removed the “#” from all the links in the menu and added the given CSS”
    – Could you please keep the change on your site, so I can inspect it? Also, could you please tell me what browser are you using?

    The thing is that I’ve just tested this solution at WordPress.com and it seems to work: https://cloudup.com/cW6uSjuNljz

    —

    By the way, a new update with fixes for these two issues — (1) and (2) — has been pushed to WordPress.com server. It’s currently under a WordPress.com review. I’ll let you know when it’s ready for production sites at WordPress.com.

    Thank you,
    Taras

  • tarasdashkevych · Theme Author ·

    I just want to let you know that the update has been released for production sites at WordPress.com.

    Best regards,
    Taras

  • thecomputernoob · Member ·

    I watched your video, and it seems I may have not conveyed the issue well enough.

    The problem with the persistent overlap is when you *middle-mouse-button click* on a sub-menu element (such as “GENERAL” in your case) to open it in a new tab, and then move on to the next sub-menu arrow. The previous sub-menu panel still stays underlapped beneath this new sub-menu panel.

    Example:

    MENU v
    SUB-MENU 1 > GENERAL
    SUB-MENU 2 > ALSO GENERAL

    Here, if I hover over SUB-MENU 1 and then middle-mouse-button click GENERAL, and then hover over to SUB-MENU 2, then the SUB-MENU 1 still stays open in the background as the SUB-MENU 2 overlaps it. It stays this way unless I make another click in the SUB-MENU 2.

  • tarasdashkevych · Theme Author ·

    Thank you very much for providing additional information about the issue. I think I understand what you mean (the issue happens not only on menu links with “#” but also on regular links).

    At the moment, I do not have a solution for you, since we probably need to refactor JS script, responsible for accessibility of the main menu, in order to resolve this issue.

    I’ve added this issue to our investigation to-do list.

    Thank you again for bringing it to my attention.

    Kind regards,
    Taras

  • The topic ‘Sub-Menu Panels Stay Open & Overlap Upon Clicking’ is closed to new replies.