0

In a previous question I asked (and later worked out) how to style sub menus, I want to expand on that with another question related to styling sub-menus.

I have hit an issue were if the parent is the selected page all child pages pick up the same styling, I believe this is because the current-menu-item class gets added to the parent li.

If a child element is selected only the child is highlighted (which is correct)

Has anyone encountered this before? What is the best way to only have the selected page highlighted and not the child elements of that page?

As requested, here is the CSS that is being called to highlight the child menu.

.current-page a, .current-menu-item a {
    background-color: #EE8833;
}
Improve this question
4
  • Can you post the CSS you use to style the menu? There should be ample classes on menu items to style them effectively without the problem you're describing(in theory), might just need a bit more specifity with your CSS is all.
    – t31os
    Commented Aug 9, 2011 at 13:21
  • Specificity was the key, if you could put that as an answer I will accept it, once I posted the CSS it was clear as day, I need to include >
    – Toby
    Commented Aug 9, 2011 at 14:12
  • Point is that this is a) no WP Q & b) can be solved using child selectors, which only select the direct child: .first-menu-parent-item ul > .current-menu-item { /* style first element */ }.
    – kaiser
    Commented Aug 9, 2011 at 14:13
  • You should still be able to do it without needing to use el > child type selectors(which won't work in some browsers, namingly IE)..
    – t31os
    Commented Aug 9, 2011 at 14:17

1 Answer 1

Reset to default
1

You can try using the .current-menu-item li a"first-child selector. Here is an example I've used in the past to highlight the current menu item only:

#menu .current-menu-item {
background:white; 
}
#menu .current-menu-item li a:first-child { 
color:white!important;
}
#menu .current-menu-item a { 
color:black !important ;
}

You will need to change the #menu to your id or class.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.