Navbar Dropdown Questions

Hello,

I’m working on a client’s website and we’re facing a couple of issues with a dropdown menu:

1. Dropdown size on smaller screens
The dropdown contains many categories, which makes it quite large. On smaller screens, users need to scroll to view all options, which affects usability.
Is there a recommended way to make the dropdown more responsive for smaller screens or any other recommendation?

2. Dropdown closes too quickly
The dropdown is very sensitive, if the cursor slightly moves outside its area, it closes immediately. This makes navigation difficult for users.
Is it possible to introduce a small delay before the dropdown closes, so users have a bit of time to move the cursor back?

I initially considered switching the dropdown trigger to a click instead of hover, but the parent menu item is also a link, so that approach may not be ideal.

Any guidance or recommended solutions would be greatly appreciated.

Best regards,

Hello,

Could you please share some useful screenshots for better understanding how it works on your site that demonstrate the problem, so we can understand and reproduce it on your website?

Best Regards

As you will see in the first picture the dropdown menu is quite big for small screen, and my client was wondering whether it can be more responsive, meaning that when the screen is smaller the dropdown also gets smaller.
In regards to the fact that it closes too quickly, just go with the mouse on \”PROPS\” dropdown in navbar, move the cursor out of it, and see how fast it closes.

Attachments:

You must be logged in to view attached files.

Hello,

Try to add this CSS in Theme Settings > Custom CSS:

@media (max-height: 786px) {
    .wd-dropdown-menu.wd-design-aside .wd-sub-menu-wrapp > .wd-sub-menu {
        max-height: 70vh;
        overflow-y: auto;
    }

    .wd-dropdown-menu.wd-design-aside .wd-dropdown {
        max-height: 70vh;
        overflow-y: auto;
    }
}

Best Regards

Ok, this will do for now so that the dropdown doesn’t get hidden when the screen is small.
What about the problem with the dropdown that closes instantly when the cursor isn’t on it?
Can we do something about it? Maybe add a delay so that the user has time to go on it again and it won’t close instantly?
Or if you have any other solutions to suggest I’d love to hear them.

I showed the result to my client and they’re asking me whether it’s possible in smaller screen to make the text of the dropdown smaller, so that the user doesn’t have to scroll at all, resulting in the whole dropdown to show up.
Is that possible?

Hello,

01. Regarding the dropdown closing too quickly, this behavior is expected when using the “hover” trigger, as the menu will close immediately once the cursor leaves its area.

To improve usability, we recommend switching the dropdown trigger from hover to click. You can do this by navigating to:

Appearance > Menus > Edit your menu item > Open on mouse event > Select “Click”.
https://ibb.co/zz4W7WR

02. Try to add this CSS in Theme Settings > Custom CSS:

@media (max-height: 786px) {
    /* Left aside menu (main categories) */
    .wd-dropdown-menu.wd-design-aside.wd-style-with-bg 
    .wd-sub-menu-wrapp > .wd-sub-menu > li > a {
        font-size: 13px;
        line-height: 18px;
        padding: 10px 14px;
    }
    /* Optional: reduce icon size */
    .wd-dropdown-menu.wd-design-aside.wd-style-with-bg 
    .wd-sub-menu-wrapp > .wd-sub-menu > li > a .wd-nav-img {
        --nav-img-height: 16px;
        margin-inline-end: 6px;
    }
}

Best Regards

[Author]

Posts