Grow your CSS skills. Land your dream job.

Keeping parent page highlighted?

  • # April 6, 2013 at 10:18 am

    I’m working on this site:

    http://dpa-grp.com/dpagrp2013/projects/

    and trying to keep the parent page “Projects” highlighted in the main nav while on the individual posts in that category.

    The “current_page_parent” works for sub-pages (as on the Services page) but apparently not with posts.

    Anyone know how to do this?

    # April 6, 2013 at 11:53 am

    There are a couple of ways…the simplest way is to give each page (or ID) a separate class and each link an individual class too.

    Then you could do something like

    .page-1 .home {
    styling;
    }

    .page-2 .about {
    styling;
    }

    otherwise…javascript.

    # April 6, 2013 at 12:02 pm

    The pages are already highlighted using current_page class… the problem is when selecting posts within a page, I’m losing the highlight.

    I have a template for the Projects page that pulls in all posts within that category. The main page highlights perfect… it’s only when selecting the individual posts from the sidebar that I can’t figure out.

    Maybe I’m not explaning this very well, sorry.

    # April 6, 2013 at 12:20 pm

    Do you have a link?

    # April 6, 2013 at 2:17 pm

    Link is all the way at the beginning of the thread @Paulie_D ;)

    Since WordPress already added classes to the body, you can use those to style the Project menu item. Change line 105 in your CSS:

    .topmenu li a:hover, .topmenu li.current_page_item a, .topmenu li.current_page_parent a {

    To this:

    .topmenu li a:hover, .topmenu li.current_page_item a, .topmenu li.current_page_parent a,
    body.postid-201 .topmenu li a,
    body.postid-194 .topmenu li a,
    body.postid-180 .topmenu li a,
    body.postid-174 .topmenu li a,
    body.postid-165 .topmenu li a,
    body.postid-119 .topmenu li a {

    You could also make a separate page template for the individual project pages, and put a specific class in there somewhere, but what I wrote here above is probably the quickest solution for now.

    # April 6, 2013 at 2:32 pm

    edit// nevermind, sorry

    # April 6, 2013 at 2:39 pm

    I tried Senff’s solution, and it works, except that it highlights ALL the pages rather than just the Projects Page.

    # April 6, 2013 at 2:55 pm

    You’re right, I missed that. This should be the proper code:

    .topmenu li a:hover, .topmenu li.current_page_item a, .topmenu li.current_page_parent a,
    body.postid-201 .topmenu li.page-item-21 a,
    body.postid-194 .topmenu li.page-item-21 a,
    body.postid-180 .topmenu li.page-item-21 a,
    body.postid-174 .topmenu li.page-item-21 a,
    body.postid-165 .topmenu li.page-item-21 a,
    body.postid-119 .topmenu li.page-item-21 a {

    # April 6, 2013 at 3:01 pm

    Thank you Senff! That last one did the trick!

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".