a tag overriding li in wayfinder

Hi,

just started working with this and I’m not too sure of the best way of getting round this problem...

I want my menu to change colour when the page is active however styling the ’active’ class that Wayfinder sets won’t work as there’s an ’a’ tag within it and I’m setting ’a’ references across the site.

Setting li.active a {color: white} works for the top level but also sets the all the subnav to white as well as they’re held within the li tag and I don’t want that, although I do want to set any active subnav to white as well.

Please can someone help!! I’m sure it’s a simple solution but it’s driving me MAD!!

Thanks,
Andy.

This should work:

Actually, PaulP, that would apply to all a within ul, which would override the top-level (white) setting.

would only apply to second-level and below list items.

Sorry my bad, should have had this:

li.active a {color: white}
li ul li.active a { color: blue; }

But yours also works

Hi guys,

Thanks for the SUPER quick response!! That’s not quite what I was after though as li.active a {color: white} still changes all the subnav to white. Do you know any way round this at all?

Thanks a lot for your super speedy responses!

Andy.

Not sure you look in here again - this obviously is not such a "super speedy response".

li.active a {color: white} still changes all the subnav to white. Do you know any way round this at all?

Try this instead:
The ">" makes the rule affect only the immediate child element [tt]a[/tt] (in the cascading hierarchy) of that [tt]li[/tt] element and is not inherited further down the cascade.
See http://www.w3schools.com/cssref/sel_element_gt.asp

I think you can also use &selfClass=`foo` to add a class to the displayed page menu item if you want to target just the displayed menu item (and not its parent, siblings or children).
Note active is useful for displaying submenus, and undoubtedly other things as well.