Help with Mega menu styling in Pro theme

[ccarter3]

Need assistance on centering mega sub menus under the associated navbar links so they pop up at correct location at different desktop sizes. Also trying to apply styles to JUST the parent heading at the top of each column in the mega sub menus, not the child links.

[friech]

Hi @ccarter3,

Thank you for writing in,

@ccarter3

Need assistance on centering mega sub menus under the associated navbar links so they pop up at correct location at different desktop sizes.

I see you added this custom CSS to resize the mega menu.

.x-navbar-fixed-top-active .desktop .x-nav .x-megamenu.custom-width-1>.sub-menu {
    max-width: 60%;
    margin-left: 25%;
}

Please update that to this so it will always center.

.x-navbar-fixed-top-active .desktop .x-nav .x-megamenu.custom-width-1>.sub-menu {
 max-width: 60%;
 margin-left: auto;
 margin-right: auto;
}

@ccarter3

Also trying to apply styles to JUST the parent heading at the top of each column in the mega sub menus, not the child links.

Use the following selector to style the submenu heading.

.desktop .x-nav .x-megamenu>.sub-menu>li>a {
/*	YOUR CSS PROPERTIES HERE*/
}

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!