Styling for a mega menu

Support
#1

Hi There,
I’ve got two mega menus on my site and both are displaying at the full width of the site even though I’ve got them set to 3 and 4 columns respectfully. I’ve tried inspecting the element but can’t seem to add the css needed to have them NOT extend the full width of the site.

They can be found at: http://www.saintjamespreschool.com/
Check the CYF section and the Give section.

My hope would be to have them centered under their respective parents and have them have equal padding left and right. Thanks so much for all your help!

Regards,
Nancy

#2

Hi There,

Make sure you have set the correct helper classes

col-2
col-3
col-4
col-5

Please refer to : https://theme.co/apex/forum/t/features-megamenus/99

If it is set correctly, please provide your login credentials.

Thank you

#3

Okay, will do. . .
Just checked, and I was missing the dash. So, they look a little better, but they still look wonky. They are filling up the entire width of the site, and they really do not need to.

How do I send you my credentials so they are private?

thanks very much for your help!

Best,
Nancy

#4

Hi there,

Thank you for providing the login information. I checked your website and see that the Mega Menu feature is working ok. Mega Menu is always full width in X and you can not have another way around.

But you can have the links centered to have the spaces between the columns equally. Please kindly add the code below to X > Launch > Options > CSS:

.x-navbar-fixed-top-active .desktop .x-nav .x-megamenu>.sub-menu {text-align: cetner;}

Hope it helps.

#5

Okay, good to know. Thanks very much for taking the time to answer my question. . . much appreciated!

Best to you and your team,
Nancy

#6

You’re welcome.