menu html-block scrolling not work

Hi,

I have inputted the html-block in the category menu(see support_03_03.png) and the html block contains a lot of categories. When I scroll down, I found it did work properly. (see video)

Please help me to fix it.

Thanks

Attachments:

You must be logged in to view attached files.

Hi,

I upload the video again as the prior one is over 2MB.

Hi,

The video is attached.

Attachments:

You must be logged in to view attached files.

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

Hi,

Thank you for your help.

I follow your instruction and add CSS. The scrolling bar is workable. But I could not adjust the right margin (see the attached file) even I have put negative on the container’s right margin.

Could you help me to solve the right margin issue ?

Thank in advance.

Attachments:

You must be logged in to view attached files.

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

Hi,

Thank you for your help

Please close this ticket.

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

[Author]

Posts