Navigation CSS Conditional Coloring
Channel: Creator's Media Tools
Date: 27/02/2012

http://terrybritton.com Recently an interesting question came up in the Headway 3.x discussion area asking how to do something that turned out to be less challenging than thought at first - thanks to Wordpress adding new classes of its own to the navigation structure since WP3.0!

You can read all about it at this site: http://www.designisphilosophy.com/tutorials/highlight-current-page-or-category/

But, frankly, it took me much longer than five minutes to comprehend what on earth the author was driving at (and how to actually USE that information!)

Here is a video that explains it, and I include example code beneath.

As explained in the video, to make life easier on yourself, one thing you should do first is name your navigation bar with a custom name and assign it an allOneWord custom css class under the block's config. In the examples below, I've given my navigation bar the class "testNavigationColors".

(I like using that camelCase approach.)

The order of items is important, as they "cascade". Thus, the "fallback" items are at the top.

Because I had messed with this nav-bar in the Visual Editor, it had some default stuff imposing itself, so I had to force the color changes using the !important before the semi-colon of each color.

Note the ancestor code is at the top, followed by the page item and category menu items.