Style Top Link in Mega Menu Only

I’m trying to center, bold, and increase the font size for the top link for each column in a 4 column submenu. I’ve got these marked with #holder for the URL, and I just want them to be headings for the links below.

When I add a custom CSS Class to the menu item, it changes all of the child-menu items in the list.

The dev website is https://fusion.rookseo.com.

Hi There,

Thank you for writing in, are this the custom CSS you use to resize the submenu text?

.x-nav .x-megamenu>.sub-menu a {
   font-size:20px !important; 
}
.sub-menu li a:link {
    color: #fff;
    font-size: 20px !important;
}

Please use this selector instead, it will specifically target those items with #holder value on the href.

.x-nav .x-megamenu ul.sub-menu a[href="#holder"] {
	font-size: 22px;
}

Add !important if it does not work.

Hope it helps,
Cheers!

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.