How to style navigation parent items like the current item

By default, Plone only highlights the current item in the navigation tree, and doesn't apply any special styling to parents of the current item in the navigation tree.  If you are customizing the visual theme of Plone, you may want to change this behavior.  The most commonly requested change is to make parent items look like the current item.

Here's how.

Beginning with Plone 3.0, parent items have a CSS selector, ".navTreeItemInPath".  This makes it easy to apply styles to parent items. 

If you want the parents of a current item look like the current item itself, add the following CSS to your ploneCustom.css file or to a CSS file in your custom theme.

.navTreeItemInPath,
.navTreeCurrentItem {
    background-color: &dtml-globalBackgroundColor;;
    color: &dtml-globalFontColor;;
    border: &dtml-borderWidth; &dtml-borderStyle; 
            &dtml-globalBorderColor; !important;
}

See the master navigation tree CSS file at portal_skins>plone_skins>navtree.css for more of Plone's default navtree formatting.

Plone 2.5 and 2.1

Unfortunately, Plone 2.5 and below don't have this special CSS selector on parent items.  This limits the options for styling parent items in the navigation tree.  Still, it is possible to accomplish a similiar effect by modifying the file portlet_navtree_macro.pt as Kai Diefenbach explains. 

Change portlet_navtree_macro.pt, from:

   isCurrent node/currentItem;"    

to:

   isCurrent python: node.get('currentItem') or \
                     node.get('currentParent')"

!