Different color on each main menu item

[samueltheriault]

Hi,

I’m trying to make each main menu a different color.
I did add a Specific CSS Class on the menu item. But the CSS does not make it happened.

What is the CSS code to affect my item if the CSS Class is: menu-about

Thanks

[mldarshana]

Hi There,

Thanks for writing in! If you have added the class correctly, you should be able to use the following CSS rule to target your menu item.

.x-menu .about {
    background-color: red;
}

If not, please provide us with the URL to your site so that we can look into your issue.

Thanks!

[samueltheriault]

Thnaks you, I was working in the style.css file but was not working. In the Global CSS in the Pre editor it’s working.

[mldarshana]

Hi There,

In most cases, you will need to use the !important keyword when adding styles into your child theme’s style.css file.

Global CSS has a higher precedence and I’m glad you were able to figure it out.

Also I suggest that if you see certain CSS rules has not effected, you will need to first purge your server cache (if you’re using a caching plugin), then you need to clear your browser cache as well. Further you can copy all of your styles into an online tool like CSS Lint (http://csslint.net/) to see if you’re getting any errors.

Thanks!