menu html-block scrolling not work

Hi,

Our menu dropdown size in the header “Categories” element works differently than the default dropdowns. Sub-menu dropdowns with design rather than “default” will always have a minimum height equal to the total height of the main vertical navigation. Here is a screenshot (https://prnt.sc/9sggSnt2t1z6) – the minimum height of the dropdown marked with green color will always be equal to the parent menu marked as red color without relation of how tall content is placed inside it. Here is another video for more clarification (https://monosnap.com/file/HKlGeE0Dvy0XFgewfJLPrImPgFo39Q). It was done in that way because if the sub-menu dropdown height is less than the parent menu, the last menu item dropdowns will be unreachable for the mouse cursor. Here is the video with a demonstration of this issue (https://monosnap.com/file/yjRpOyzTId321b80aPLTnAr5jKjiYC).

In your case, your main vertical navigation has too many items which do not fit on the screen and requires page scrolling to see last menu items. As was described before, sub-menu dropdowns assigned to this menu also will have minimum height equal to the main parent vertical menu, which in that case will be automatically larger than the whole screen and also requiters page scroll. This issue can be fixed in several ways:

1. Reorganize your main vertical menu so it will contain not more than 8-14 parent menu items, do not require scrolling on a desktop, and not stretch out sub-menu dropdowns (https://prnt.sc/J8dECohdI1ha).

2. Select “Full width” or “Set sizes” dropdown design, enable “Scroll” option (https://prnt.sc/RaFgyYaS-8pP) and use the following custom code that disables “min-height” behavior and make the height option work in the header “Categories” element menus (https://monosnap.com/file/vSFciYwIsmPPqGRzPs8SZOUDm9QcpQ), but in that case, it requires additional adjustment for each dropdown height because possible issues described before.

body .wd-nav-vertical .wd-dropdown-menu:is(.wd-design-sized,.wd-design-full-width) {
	min-height: unset;
}

body .wd-nav-vertical .wd-dropdown-menu:is(.wd-design-sized,.wd-design-full-width) .wd-dropdown-inner {
	   height: min(var(--wd-dropdown-height, unset), var(--wd-content-h));
}

Kind Regards

Hello,

The problem is caused by the fact that full-width dropdowns are located inside the default dropdown. To fix this problem, use this custom:

.wd-nav-vertical .wd-dropdown-menu.wd-design-default .wd-dropdown.wd-design-full-width {
	padding: 0;
}

Then you need to remove this negative margin – https://prnt.sc/zaNdeLnTiIih which is defined in the content dropdown in the settings of Elementor.

Kind Regards

Hello,

You are welcome! Always remember that you can reach out to us with any questions you may have.

Wish you all the best.

Kind Regards