Hi all,
Already for a few days in a row I’m trying to solve issue with hereClass parameter and CSS. Despite the fact that I have a feeling that’s just a bad CSS, still maybe issue is Wayfinder related.
I have just plain text menu, without any complicated styles and actions. I want to achieve change of colour upon selection only for selected menu item in any of the levels, (like Document 3 in the current example). I am trying to stylise menu through CSS, it all works great until certain moment when I try to differentiate level1 selected and level2 selected. Then it colorise all parent’s thread, not active item.
Menu call:
[[Wayfinder?&startId=`0` &levelClass=`level` &selfClass=`selected`]]
Document structure:
- Document 1 (level1)
- Document 2 (level1)
- Document 3 (level1 selected)
- Document 5 (level 2)
- Document 6 (level 2)
- Document 7 (level 2 last)
-Document 4 (level1 last)
CSS:
Basically all works fine for level2 selected item:
#menu li.level1 a {color: #fff;}
#menu li.level1 a:hover {color: #f90;}
#menu li.level2 a {color: #fff;}
#menu li.level2 a:hover {color: #f90;}
#menu li.level2.selected a {color: #F90;}
But when i try to add:
#menu li.level1.selected a {color: #F90;}
it paints all thread with level1 selected colour.
I really hope someone used to create same structure and may be able to help, or just knows any other ways to tell Wayfinder not to apply style for whole parent’s thread but just for a selected element.
Thanks a lot!
#menu li.level2 a {color: #fff;} to #menu li ul li a {color: #fff;}
