Archived topic
Customize color of item menu
7 replies · Started by David Rubio on November 28, 2018
I would like to know if i can customize the background color of an item menu.
Hi there,
this article explains how to make a menu item look like a button, it includes how to add a class to the menu item, and then add some CSS to style it:
https://docs.generatepress.com/article/adding-buttons-navigation/
Let me know if you need a hand with the CSS
Could you give me instructions step by step? This is my first time with WP and I dont know how to do it myself :(
No problems. So to be clear, you want to color a single menu item background color? So it will be different to the rest of the menu items? Let me know
Yes, all items with the original background color, and the last coloured in red for example (rest in black)
OK
1. Dashboard > Appearance > Menus
Click Screen Options top right of window. Check the CSS Classes. Close the options.
2. Edit the menu, select the item you want to change color.
In the CSS Classes field add: custom-color
3. Customizer > Additional CSS add this code and change the hex codes for your colors.
.main-navigation .main-nav ul li.custom-color a {
background-color: #ffffff;
color: #000000;
}
4. To add a hover color add this additional code and again change the hex codes:
.main-navigation .main-nav ul li.custom-color:hover a {
background-color: #ffffff;
color: #000000;
}
Great job man!!
Glad to be of help :)