Return to previous page

Mega Menu – Center Elementor Built Static Block Mega Menu

This topic has 2 replies, 2 voices, and was last updated 3 years, 11 months ago ago by John Holden

amongthieves

Participant

May 13, 2020 at 01:47

Ok so i am making mega menu static blocks with elementor and everything is going fine there, but the dropdowns of the mega menus are not centered, they are set to the far left everytime for every dropdown. The weird thing is when the page first loads and before it finishes, the mega menus will be centerd but once the page finishes loading, they float left.

Here is the way they are positioned now:
https://imgur.com/OGvrzeT

Here is what i want them to look like
https://imgur.com/YsPiYm5

I was able to align the above dropdown with custom css, issue is, its not a “center” align code with css, its a ‘ position: relative; left: -100px; ‘ css so i cant align each dropdown to be center because i need to set a specific number for each individual dropdown box which makes them all off center by a little bit as each guests screen size will vary.

So i am looking for what css i need to enter for the selector ‘ menu-static-block nav-sublist-dropdown ‘ to make all of the mega menu dropdowns to be centered aligned.

thank you.

#236985 Copied Theme version: 6.3.3 WooCommerce version: 4.1.0

1 Answer
John Holden

Support staff

May 13, 2020 at 07:15
Hi,

Try to use the next custom CSS code:
```
.menu-static-block.nav-sublist-dropdown {
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    animation: et-fadeIn .3s ease !important;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: all .2s ease-in-out;
}

.item-design-mega-menu {
    position: static;
}

.item-design-mega-menu:hover .menu-static-block.nav-sublist-dropdown {
    opacity: 1;
    visibility: visible;
}
```
Regards,
Hung PD
#237007 Copied
Viewing 2 results - 1 through 2 (of 2 total)