Need To Change The Colour Of Each Menu Heading. - Wordpress

I have a website: http://cancersurvivorshipireland.com/cancersurvivorshipireland.com/wordpress/ (temp address) but I have all the menu topics in the header the same colour, they a

Solution 1:

You can do this with CSS nth child selector as follows:

#menu-defaultli:nth-child(1) a { 
    color: green;
}
#menu-defaultli:nth-child(2) a { 
    color: red;
}
#menu-defaultli:nth-child(3) a { 
    color: yellow;
}
#menu-defaultli:nth-child(4) a { 
    color: orange;
}
#menu-defaultli:nth-child(5) a { 
    color: blue;
}

Solution 2:

Each of those menu items have a distinct id and a matching class, i.e., li.menu-item-39 is also li#menu-item-39. You can use CSS to target these ids or classes, whichever you are more comfortable with.

li.menu-item-39 > a { /* Home */color: green;
}
li.menu-item-43 > a { /* News */color: red;
}
li.menu-item-47 > a { /* Blog */color: yellow;
}

Edited to address other answers: You can use the :nth-child pseudo-class to do this, but that will only work in browsers that support CSS3.

Solution 3:

You can use :nth-child on the list element. Add this to your css file

#menu-default > li:nth-child(1) > a { color: green; }
#menu-default > li:nth-child(2) > a { color: red; }
#menu-default > li:nth-child(3) > a { color: yellow; }
#menu-default > li:nth-child(4) > a { color: white; }
#menu-default > li:nth-child(5) > a { color: orange; }

Solution 4:

You would need to get into the navigation.php file I'm presuming and add css id parameters to each and then give them any entry in styles.css to assign the color.

If you're not familiar with editing the files or changing code it's not an easy fix.

Here's some css code:

#menu-default > li:nth-child(1) > a { color: green; }
#menu-default > li:nth-child(2) > a { color: red; }
#menu-default > li:nth-child(3) > a { color: yellow; }
#menu-default > li:nth-child(4) > a { color: white; }
#menu-default > li:nth-child(5) > a { color: orange; }