Need to change the Colour of each menu heading. -

Question

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 are all green. I am trying to get them all different colours.

eg. Home = green, News = red, Blog = yellow. but have absolutely no idea how to do it?

Answer 1

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

#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: orange;
}
#menu-default li:nth-child(5) a { 
    color: blue;
}

Answer 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.

Answer 3

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

Answer 4

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