0

I'm trying to style the navigation of a WordPress site using the following CSS to highlight the current page or parent page. I'm using a custom post type to display projects.

.current-menu-item > a,
.current-menu-ancestor > a,
.current_page_item > a,
.current_page_ancestor > a {
    border-bottom: 2px solid #fcbf32;
}

This works perfectly for top level pages and archives.

When I add the following to the above I'm having problems:

.current_page_parent > a

Using this I get the following:

  • Both the projects link (.current-menu-item) and blog link (.current_page_parent) are highlighted, with the blog link being shown as parent of current page when on the main projects page.
  • On the projects CPT posts, the blog is being shown as the parent (.current_page_parent).

How do I have the projects posts show the projects navigation link as the parent?

Any help much appreciated. Tony

0

That's normal because projects CPT posts are not child items of Projects page. Projects page is just to display project CPT posts.

Now how to highlight Projects page when viewing single project. That's where body classes comes handy. You can use body classes to highlight and unhighlight a menu item based on the page, cpt or section you are viewing.

For example if your post type is project and menu item id for Projects page is 26 and Blog page menu id is 27. Then you can highlight menu items like this.

body.single-project div.nav ul li#menu-item-26 > a{
    border-bottom: 2px solid #fcbf32;
}
body.single-project div.nav ul li#menu-item-27 > a{
    border-bottom: 0;
}

This will unhighlight blog menu item on projects single posts and highlight Projects page. You can apply same rules for other items too.

  • Today is body_class()-day, right? :) – kaiser Oct 19 '14 at 13:41
  • tonyedwardspz glad that worked the way you wanted. @kaiser hahaha. right – Robert hue Oct 19 '14 at 17:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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