Question

I have a simple web page navigation bar which is working well. Now I want to style it so that the current page navigation link is a different colour. In this case I want to make the current page navigation link use this colour:

color: #00A1DB;

I’ve setup a simplified jsFiddle which shows what I currently have:

http://jsfiddle.net/fmdataweb/BEmXZ/

I’ve added a class of “current” to the Contacts link to represent that this is the current page. Now I need to modify the CSS so that it changes the colour of the “Contacts” link in the navigation bar to the specified colour.

I’ve hacked the CSS for the past few hours but can’t quite work out the necessary changes to make to get this working. Really appreciate it if someone can show me how to make this happen – learning CSS as I go at the moment.

Thanks!

Answer 1

Is this what you want? http://jsfiddle.net/BEmXZ/2/

Essential part:

change

.sf-menu li.current {
    color: #00A1DB;
}

to

.sf-menu li.current a {
    color: #00A1DB ! important;
}