“Mega Menu widget”, the next level of the menu has a big gap

I’m using the component “Mega Menu widget” in the Sticky navigation section.
I found that the next level of the menu has a big gap,
I tried to adjust the advanced and other settings of elementor,
but it doesn’t work.

Attachments:

You must be logged in to view attached files.

Hello,

Please, provide us with your website link and admin access so we can log in and check this on your side.

Thank you in advance.

Thanks for the reply.

This issue is caused by using “Mega Menu widget” in places, for which it was not designed. The main purpose of “Mega Menu widget” element is to be able to add a menu with dropdowns to the body of the site next to other elements such as sliders, banners, products, and others. You can see an example of using this element in our demo content on the demo page called “Fashion” (https://woodmart.xtemos.com/demo-fashion/demo/fashion/) where “Mega Menu widget” widget is placed alongside of main homepage slider (screenshot https://prnt.sc/xDRP3RTRmQo3).

“Mega Menu widget” is not designed to be placed inside other dropdowns because WordPress already has an easier method to create menus with sub-menu dropdowns using a native menu editor which is easy to configure without using HTML-blocks and this method also better in terms of site performance because in result fewer HTML elements is used.

Because of that, this issue has two possible solutions:

1. Remove HTML-block “Mega Menu widget” from dropdowns with “Default” design and recreate sub-menus using native WordPress menu editor like is shown in the following example screenshot (https://prnt.sc/LS_taml3CKI5).

2. Alternatively, if you want to use “Mega Menu widget” inside other dropdowns, you can add the following custom code located below to the Global Custom CSS area in theme settings to adjust the distance between the parent menu and their dropdown, but in that case, the dropdown layout will also depend on the side paddings or margins that you are configured for elements in each individual HTML-block. Here is an example of such margins from your site (https://prnt.sc/LjzeYWSBX0Wp)

.wd-sticky-nav .widget_nav_mega_menu > .wd-nav-vertical > li > .wd-dropdown-menu.wd-design-default.wd-dropdown:after {
	width: 15px;
}

.wd-sticky-nav .widget_nav_mega_menu > .wd-nav-vertical > li > .wd-dropdown-menu.wd-design-default.wd-dropdown {
	margin-inline-start: 15px;
	border-radius: var(--wd-brd-radius); 
}

Kind Regards

[Author]

Posts