MegaMenu fullwidth + elementor tabs widget

Hello,

I’m trying to use elementor tab widget in HTML block used for Mega Menu full-width.

The issue :
When megamenu is displayed, if I click on tab inside to change content, the megamenu disappears.

How to reproduce :
– create HTML block element containing “Elementor TABS widget” (https://elementor.com/help/tabs-widget/)
– create menu, select one element to be fullwidth menu and select HTML block created containing TABS widget
– go on front end : show mega menu and try to change tab.

Following events in browser console AND looking at your JS scripts, it seems that it could be caused by “resize” event (search “wd-offsets-calculated”). Contents contained in each tab of elementor widget have different sizes : so each tab change resizes the megamenu wrapper.

Thanks for your help.

Best regards.
Joffrey

Hello,

Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

.wd-nav-main:not(.wd-offsets-calculated) .wd-event-hover:hover>.wd-dropdown, 
.wd-nav-main:not(.wd-offsets-calculated) .wd-event-click.wd-opened>.wd-dropdown, 
.wd-nav-main:not(.wd-offsets-calculated) .wd-dropdown.wd-opened,
.wd-nav-secondary:not(.wd-offsets-calculated) .wd-event-hover:hover>.wd-dropdown, 
.wd-nav-secondary:not(.wd-offsets-calculated) .wd-event-click.wd-opened>.wd-dropdown, 
.wd-nav-secondary:not(.wd-offsets-calculated) .wd-dropdown.wd-opened {
	opacity: 1;
	visibility: visible;
}

Kind Regards

Thank you.

We are close to solved it 🙂

Rule : “pointer-events: unset;” is necessary. Without this, after first tab change, we can’t access anymore to the megamemu even it is visible.

.wd-nav-main:not(.wd-offsets-calculated) .wd-event-hover:hover>.wd-dropdown, 
.wd-nav-main:not(.wd-offsets-calculated) .wd-event-click.wd-opened>.wd-dropdown, 
.wd-nav-main:not(.wd-offsets-calculated) .wd-dropdown.wd-opened,
.wd-nav-secondary:not(.wd-offsets-calculated) .wd-event-hover:hover>.wd-dropdown, 
.wd-nav-secondary:not(.wd-offsets-calculated) .wd-event-click.wd-opened>.wd-dropdown, 
.wd-nav-secondary:not(.wd-offsets-calculated) .wd-dropdown.wd-opened {
	opacity: 1;
	visibility: visible;
        pointer-events: unset; // added
}

But to solved the issue, we will need JS I think. When tab change, one style rule managed by JS gone and the layout break.

This element : “div.wd-dropdown-menu.wd-dropdown.wd-design-full-width” is trigged by JS that add/remove style “left:” with a calculated value.

When you move the mouse on megamenu, this value is recaluled. When You click on tab change, this value is removed.

Thanks for your help.

Best regards.
Joffrey

Please, send us your admin access so we can try to fix this on your website.

Hi,

ok thanks for your help.

Please do not make change or disable plugin, and send me the code I need to add t fix this 🙂

Thanks a lot for your help.

Best regards.
Joffrey

Hello,

We have fixed this issue in our latest 6.0.2 release. You will need to add the following code snippet to the functions.php file in the child theme as well

add_filter( 'woodmart_clear_menu_offsets_on_resize', '__return_false' );

Kind Regards

Hello,

you are amazing !!

Thank you a lot 😀

Have a nice day.

Best regards.
Joffrey

Thank you! Have a great weekend 🙂

[Author]

Posts