Mega-menu drop down centering

[fxground]

Hello,

So i’m able to get my dropdown centered by using the following css code:

.x-dropdown{
left:0!important;
right:0!important;
margin-left:auto;
margin-right:auto;
}

I just can’t figure out why I can’t do this without the custom css. Are these options not available in the GUI? Just wondering if you can help me understand where they would be or why it can’t be?

Thanks

[fxground]

Also, noticed the mega menu modal is centered by default - and mega menu dropdown is not . What is the difference between these two? I’ve read the descriptions here: https://theme.co/docs/mega-menu#mega-menu-dropdown but I still don’t really understand the difference.

Is it just a modal will appear on top of the page and the drop down would move the contents already within the page? (Causing potential CLS issues?)

[tristup]

Hi @fxground,

The Mega Menu Dropdown element does not have any Modal and it opens exactly below the Toggle.

Thanks

[fxground]

Thanks, noticed there are some other differences … like the mega menu drop down can’t open on hover, but the modal one can … is there a way to make the dropdown one open on hover?

[tristup]

Hi @fxground,

Unfortunately, there is no such option to open the Modal on mouse hover. Still, I would suggest you go through the following thread which may help you on this.

Navigation modal to open on mouse hover

Hi @mickster58, Thanks for reaching out. It’s possible by adding this code to Theme Options > JS jQuery ( document ).on('hover', '[data-x-toggleable="e6-9"]', function() { jQuery(this).trigger('click'); } ); But it’s a bit glitchy since hover our is also triggered, for that I recommend contacting a developer and provide that idea so he could enhance it. Thanks!

CSS/JS needed to make Content Area Modal element open on hover?

Hi @ericmellen, Thanks for reaching out. To trigger the click on hover, you need to add a custom class to the toggle button and add the following custom JavaScript code into the Theme Options > JS. [Body-Movin-Content-Pro (26)] jQuery('.testb').on('mouseover',function() { jQuery(this).trigger('click'); }); Remember that the above code will work if copied as it is and don’t conflict with any existing style. Please note that the code provided serves only as a guide to help you get start…

Thanks