Home › Forums › WoodMart support forum › Navbar Dropdown Questions

Navbar Dropdown Questions

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 23, 2026 at 11:38 am #716758

    pavlos.kol1993
    Participant

    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,

    April 23, 2026 at 3:09 pm #716781

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    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

    April 23, 2026 at 3:23 pm #716786

    pavlos.kol1993
    Participant

    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.
    April 24, 2026 at 8:39 am #716815

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    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

    April 24, 2026 at 9:51 am #716821

    pavlos.kol1993
    Participant

    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.

    April 24, 2026 at 10:11 am #716824

    pavlos.kol1993
    Participant

    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?

    April 24, 2026 at 2:22 pm #716860

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    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

Tagged: , , ,

Viewing 7 posts - 1 through 7 (of 7 total)