Styling the current_page_item tag for child pages in WordPress
During a recent WordPress theme build, I wanted to have a sidebar that permanently showed child pages with a hover state and an active state utilising the current_page_item tag as generated by WordPress.
The sidebar menu in it's plain state with no hovers or active states
So far so good, but during testing, when I clicked on a parent page, all the child pages inherited the current_page_item css styling thus:
The same menu when you click on the 'meet the team' link - the child pages all inherit the current_page_item styling
…which is not pretty! So after some css thrashing which did nothing, I caved in and Googled it. Found a solution pretty swiftly on the ever-increasingly-useful WordPress support forum (which I shall make my first stop in the future!) from a user called SurfHost who posted the following solution:
.menu .current_page_item a, .menu .current_page_item a:visited {
font-weight:bold;
}
.menu .page_item ul li a, .menu .page_item ul li a:visited {
font-weight:normal;
}
.menu .page_item .current_page_item a, .menu .page_item .current_page_item a:visited {
font-weight:bold;
}
Which, with some adjusting to my own div id’s worked perfectly:
The menu with the updated styling - child items have their own styling
← New Work ~ Swinton Insurance Deal website
New CSS Reset Framework ~ Toucan CSS Reset →
