[Resolved] Simple Mega Menu: Change sub item fonts/color.

[Fredrik]

Hello,

I’m creating a mega menu from the basis of this resource: https://docs.generatepress.com/article/building-simple-mega-menu/

Right now I’m trying to change the fonts/colour of subitems using custom class. Like so,
https://docs.generatepress.com/article/adding-buttons-navigation/

But I’m running into some issues.

I’m trying to have my non-clickable custom link subitem not change colour, even on for instance Text Current.
See print: https://prnt.sc/u7dq2l

Is it possible to control this?

[Leo]

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

[Fredrik]

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.

[Leo]

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.

[Fredrik]

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

[Leo]

Try edit your CSS to this:

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

[Fredrik]

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

[Leo]

Glad to hear 🙂

[Author]

Posts