WoodMartW
WoodMart
Aug 9

Dropdown Height and Enable Scroll Not Working in Header Categories Menu

Hello XTemos Support, I believe I have found an issue with the WoodMart mega menu when it is used inside the Categories element in Header Builder. I am using a custom WordPress menu assigned to: WoodMart Header Builder → Categories → Choose menu For one of the menu items, I have configured the following WoodMart mega menu settings: Design: Set sizes Dropdown width: 1050px Dropdown height: 300px Enable scroll: Yes HTML Block for the dropdown: Selected Open on mouse event: Hover The HTML Block contains more content than can fit within 300px. The problem Changing Dropdown height has no effect on the actual height of the dropdown. For example, changing it from 500px to 300px produces no visible difference. Also, although Enable scroll = Yes, the dropdown does not get a fixed/maximum height and the content simply continues vertically instead of becoming scrollable. Interestingly, the same type of configuration works as expected when using a mega menu through the regular Main Menu. Temporary solution I was able to make it work immediately by adding the following custom CSS: .wd-header-cats .wd-dropdown-menu { max-height: 300px !important; overflow-y: auto !important; overflow-x: hidden !important; } With this CSS, the dropdown is correctly limited to 300px and the vertical scrolling works perfectly. Therefore, the HTML Block itself seems to be working correctly. It appears that the Dropdown height and/or Enable scroll settings are not being correctly applied to .wd-dropdown-menu when the mega menu is used inside the Header Builder Categories element. Could you please confirm whether this is a known limitation/bug, or if there is an additional setting required for Dropdown height + Enable scroll to work natively inside the Categories menu? I would prefer to use WoodMart's native settings rather than custom CSS if possible. Thank you.
PendingPending

2 weeks ago

Hi, Submenu dropdowns that are descendants of a vertical menu, such as "Browse Categories," behave differently in our theme than dropdowns in a regular horizontal menu. As you may have noticed, full-width dropdowns also don't work the same way as before when they are descendants of a vertical menu, and they don't stretch to full width. The same applies to the dropdown in the "Sized" design. When such a dropdown is inside a vertical menu, its content automatically stretches to the full height of the vertical menu. This was implemented as a result of feedback from our users. Without this, the lower dropdowns of the bottom items in a vertical menu would be inaccessible to the cursor after hovering over the parent menu item, and the menu configuration process would be more complicated for most users. The Aside menu design works similarly, with the difference that all its sub-dropdowns share a common scroll and a maximum height. At this time, we have no plans to change this behavior, as it could break the functionality of already created dropdowns and make the configuration process more complicated. However, if it's important for you to control the height or scroll of dropdowns in your vertical menu, you can contact our support, and we will prepare custom code to change their behavior. Kind Regards

2 weeks ago

I inspected the generated HTML in Chrome DevTools and noticed that although Enable scroll is set to Yes, the generated dropdown does not receive the wd-scroll class. The generated element is: class="wd-dropdown-menu wd-dropdown wd-design-sized color-scheme-dark wd-opened" I can also see that WoodMart correctly outputs the configured dropdown width as: style="--wd-dropdown-width: 1050px;" However, the wd-scroll class is missing, and the configured dropdown height does not appear to be applied. This seems to explain why the native Dropdown height + Enable scroll functionality does not work in the Header Builder Categories element. Applying max-height and overflow-y: auto manually to .wd-header-cats .wd-dropdown-menu works correctly.