Simple Mega Menu: Change sub item fonts/color.

Hi there,

Can you make sure to add # in the URL field with the non-clickable custom link?
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-link

Hello Leo,

Sure :) I've added this.

The "Shop and Categories" is black here.
https://prnt.sc/u7na1n

And it changes to blue here, because of "Text Current".
https://prnt.sc/u7na5u

What I like is the "Shop and Categories" aka "non-clickable custom links" to always be black.

Can you try adding a custom class like always-black to the non-clickable custom links?
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Then we will try some CSS.

Hello Leo,

Sure :) I added a new custom class called always-black.

This is my current CSS trying to control the “Shop and Categories”.

.main-navigation .main-nav ul li.always-black a {
font-weight: bold;
text-transform: uppercase;
color: #000000;

But this affects sub-items further down the menu hierarchy and don't override "Text Current"/blue font colour.

Also, this is a print from Menu back-end:
https://prnt.sc/u7o6hc

Try edit your CSS to this:

.main-navigation .main-nav ul li.always-black > a {
    font-weight: bold;
    text-transform: uppercase;
    color: #000000 !important;
}

Hello Leo,

Thanks, I think that did the trick :)

I added another class, so now I use always-black and always-grey in the CSS to control the menu hierarchy.

.main-navigation .main-nav ul li.always-black > a {
font-weight: normal;
text-transform: none;
color: #000000 !important;
}

.main-navigation .main-nav ul li.always-grey > a {
font-weight: bold;
text-transform: uppercase;
color: #999999 !important;
}

And I removed the # from my "non-clickable custom links" to avoid mouse on hover. "Text Current" is no longer displayed when clicking down the menu hierarchy. Great!

See print of results,
https://prnt.sc/u7q9nu

Glad to hear :)