You mean Shop on menu? Or on footer menu? Please make me clear with screenshot.
Thanks
@x3voodoo you want the word “shop” to be red or the whole area of shop word to be red ?
Here you go. I attached an image: http://i.imgur.com/aPLEKvM.jpg . something like this on the Shop button. And.. also, when you go with the cursor on top of the button, to be brighter. So, only the shop button part to have a different color than the rest of the menu.
If you can tell me for the footer menu also, I will be happy 🙂
Thank you in advance.
That would be really cool! Is it hard to do?
Try this
#menu-item-4376:hover {
background: red;
color: #fff;
}
Try by adding below CSS code.
CSS code for changing background color of Shop Menu
#nav-header ul:last-child li:last-child a {
background: black;
}
CSS code to change the color of Shop menu when hover,
#nav-header ul:last-child li:last-child a:hover {
background: blue;
}
Note: Child theme is recommended to customize theme.
Thanks
Thank you very much. Very helpful. Now, for the ones who’ll need a similar idea: To change the background with other colors than Black and/or blue, I chose a color like: #36C1BD . Now, depends of the color you want to put. And, in this case was #nav-header, and I wanted to change the footer menu also, so I copied the same code, but I’ve change #nav-header with #nav-footer. Hope it helps for the ones like me 🙂
Now, the last question, as I see the above code, “last-child”, I guess it means that the last button to have a specific color, but in case I want to have a different color on the third button, or fifth… how it will be named?
Thank you again!
For third button that would nth-child(3) for more info check this article Useful :nth-child Recipes
Thank you all! So instead of
#nav-header ul:last-child li:last-child a {
background: black;
}
will be
#nav-header ul:last-child li:nth-child(3) a {
background: black;
}
Thank you again.
Yes, But since there’s little chance of your nav menu to change I suppose you can target more specifically.
