Mega menu dropdown not centering

[DesignMunky]

Hi,

I am having trouble getting the dropdown of a mega menu to center that I have added to show at the mobile sized width. As you can see from this screenshot, the dropdown always aligns to the right edge of the Toggle.

Here is the link to the page:

Home New

Can you let me know how to fix please?

THanks,
Darren.

[tristup]

Hi Darren,

Thanks for reaching out.
I have checked the given URL and found the issue you described. I have checked in my local environment with the same element but was unable to find the issue, there might be some settings or values which is the reason behind your issue. I would suggest you please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[ruenel]

Hello @DesignMunky,

To get your issue resolved, please check out this old thread first:

• Hidden menu area

With a little modification to the code, you will have to use $el.x-dropdown.x-active. Position it to left by 50%, auto for the right value and a left margin of -50% to make sure that it will display at the center.

Hope this makes sense. Kindly let us know how it goes.

[DesignMunky]

Hi,

I’m sorry I’m not following exactly what CSS code you are asking me to add to the Element CSS. Can you please give me the code?

Thanks,
Darren

[tristup]

Hi Darren,

I have checked your website and found the Mega Menu is opening in the correct position and also checked the CSS code has been added properly. And it seems that the problem is resolved now, please let us know if you are still having this issue.

Thanks

[DesignMunky]

Hey Tristup,

Sorry but I must have had the correct CSS then changed it before I could clear the cache, so I am still not sure what the correct code is. I currently have:

$el .x-dropdown.x-active {
left: 50%;
right: auto;
margin-left: -50%;
}

And the dropdown is not centering again.
Thanks,
Darren.

[ruenel]

Hello Darren,

Based on the old thread, your code should contain the @media block. Therefore, you may have something like this:

Cheers.