Multi colour heading menu


#1

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;
    }


#2

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.

31

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

    .mainnav li.menu-color-red a {
      color: #ff0000 !important;
    }

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

Regards,
Kharis


#3

Thank you again Kharls,
That was perfect