Multi colour heading menu

Hi again! I am trying to get a multi colour header menu, as in the drop down has a number of choices and I want option one to be red, option 2 to be green, and option 3 to be blue. I was trying the nth-child but I can’t seem to get it to wrok I would appreciate some help please!

Thank you.

My current code:

    #mainnav .sub-menu:nth-child(2){
    	color: red;

Hello there,

The more efficient way is use menu’s CSS Classes option. It’s hidden by default. To display it, expand the Screen Options in the menu administration panel (Appearance > Menus). It’s located at top right corner.


Based on the class name above, you can use this CSS code to add special color.

    .mainnav a {
      color: #ff0000 !important;

Apply it to Appearance > Customize > Additional CSS from dashboard.


Thank you again Kharls,
That was perfect

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.