Home Forums WoodMart – Premium Template MegaMenu fullwidth + elementor tabs widget

This topic contains 7 replies, has 2 voices, and was last updated by Artem Temos Artem Temos 1 week, 1 day ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #280117

    agent3w
    Customer

    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

    Private Content Hidden
    #280134

    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

    #280153

    agent3w
    Customer

    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

    Private Content Hidden
    • This reply was modified 1 week, 2 days ago by  agent3w.
    #280437

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

    #280478

    agent3w
    Customer

    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

    Private Content Hidden
    #280688

    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

    #280718

    agent3w
    Customer

    Hello,

    you are amazing !!

    Thank you a lot 😀

    Have a nice day.

    Best regards.
    Joffrey

    #280719

    Thank you! Have a great weekend 🙂

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘MegaMenu fullwidth + elementor tabs widget’ is closed to new replies.