Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
+1 vote
in Q2A Core by
I would like to highlight the selected category menu item. The item has the class .qa-nav-cat-selected. This was no problem with version 1.3 but now I am using sub-categories as in version 1.4. The issue is that the selected sub-category and its parent category have both the same style. Do you have a solution to style only the selected category and no parent categories?

1 Answer

0 votes

Since each level of navigation is surrounded by a qa-nav-cat-list-X class (where X is a number), you can use a nested CSS selector, e.g.

.qa-nav-cat-list-1 .qa-nav-cat-selected { ... }

ok, then you can manage the behavior of the sub-categories only. However, when only a main category is open and shall be marked, then you would need to add also .qa-nav-cat-list .qa-nav-cat-selected. When you open a sub-category, the class then applies to both the parent and sub-category. How can this be solved?
One option is to use a CSS selector for immediate child, e.g.:

.qa-nav-cat-list>.qa-nav-cat-selected {...}

But this won't work in IE6. The other option is to override the styling changes in a second selector which is specific to the sub-category.