How to individually set the colour of secondary menu items

[Kathryn]

Kathryn

March 10, 2016 at 1:29 pm

Hi I wonder if anyone can help me. I am just starting out with the Virtue Premium theme, and want to have a secondary menu bar at the top of the page where each menu item has a different colour. Is this something that can be done with the CSS or will I need something more complicated to get the style inline? I am fairly new to PHP.

So far I have tried to add specific background colour to a given menu item (e.g. 863 is the first one when I look at the DOM explorer in developer tools):
#menu-item-863 a {
background-color: #FF5248;
}
to both the style.css and then tried in a child theme, but neither has taken effect and overridden the default for the theme.

I have also tried to create a CSS class and use the option in the menu settings to try to use a custom class for each menu item. In the DOM explorer this looked like it would just end up affecting the text anyway rather than the whole button?

Any help would be gratefully received.