[Resolved] Custom css in menu item not working

[Faye]

Hi there,

This is on my site fivepixels.co.uk – I’ve added a custom css class called ‘clientlogin’ to a menu item (under appearances->menu). The menu item is called “Client login”.

Then I’ve added
.clientlogin {
color:#ff77od;
}

to custom css, but the menu item stays white (which is what I have set it to using GPs color add on).

How can I get the colour to change for a single menu item?

I’m sure this is simple, but it’s getting late and I’ve been staring at it for ages… any help much appreciated.

Have I explained that properly? Please ask if you have no idea what I mean.

Thank you!!
Faye.

[Leo]

Hi there,

Menu items are always a bit tricky as the CSS gets overwritten.

Try changing it to this:

.main-navigation .main-nav ul li.clientlogin a {
    color: #ff77od;
}

Let me know.

[Faye]

Nope – the new colour is still crossed out in the inspector and the menu remains white.
I can’t actually get it to change at all using the css inspector 🙁

[Leo]

It says Invalid Property value so check the hex code. If you try this it should work:

.main-navigation .main-nav ul li.clientlogin a {
    color: #000000;
}

[Faye]

Oh man, I had an ‘o’ in my hex.
See? Screen blindness. Time for me to go to bed.

Thank you so, SO much – I’ll be able to sleep now 🙂

[Leo]

No problem 🙂

[Yael]

I am having the same issue. Was getting ready to post and decided to search first. Tried your suggestion Leo but the styles are overridden by colors in customizer for main menu.

[Leo]

Even with the long selector here? https://generatepress.com/forums/topic/custom-css-in-menu-item-not-working/#post-341622

Can you link me to the page?

[Yael]

Actually, I’m having a variation on this issue; will open a new thread.

[Leo]

Sounds good 🙂

[Chris]

Similar issue with the font color for the main menu and not being able to change the color. I have tried the suggested selectors above, CSS class, menu item #, all of them together but no luck.
websitewannabe.com

Thanks in advance.
Chris

[Chris]

FYI I was able to get the font color to work by using the .main-navigation .main-nav ul li.custom-css-class a {} from this article: https://docs.generatepress.com/article/adding-buttons-navigation/

Thanks!

[Ying]

Hi Chris,

Glad you’ve figured it out 🙂

[Author]

Posts