Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Keeping parent page highlighted?

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 6, 2013 at 10:18 am #43925
    janet4now
    Participant

    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 #130835
    Paulie_D
    Member

    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:20 pm #130844
    Paulie_D
    Member

    Do you have a link?

    April 6, 2013 at 2:17 pm #130848
    Senff
    Participant

    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 #130850
    wolfcry911
    Participant

    edit// nevermind, sorry

    April 6, 2013 at 2:55 pm #130855
    Senff
    Participant

    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 {

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.