Archived topic
Custom css in menu item not working
12 replies · Started by Faye on June 29, 2017
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.
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.
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 :-(
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;
}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 :-)
No problem :)
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.
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?
Actually, I'm having a variation on this issue; will open a new thread.
Sounds good :)
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
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!
Hi Chris,
Glad you've figured it out :)