This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

highlight Parent Menu Item when on child post

  • Creator
    Topic
  • #9005
    propagandalabs
    Participant

    J,
    All research has pointed back to the theme for answers. We have a typical nav via wp custom menus containing parent pages and child pages / posts. We have each individual page/post menu item appearance changed via the ubiquitous “.current-menu-item” (for other users’ ref: in BC’s case it’s #access li.current-menu-item ). BUT how do we call the parent when on a child page or post? Here’s what the ‘nets say and they are wrong:

    #access li.current-menu-parent,
    #access li.current_page_parent,
    #access li.current_page_ancestor,
    #access li.current-menu-ancestor { stuff:wouldbehereabut; dang: nothing-above-works !totallyimportant; }

    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Author
    Replies
  • #9020
    Jason Bobich
    Keymaster

    Hello,

    You need to style the anchor tag within the list item, which is the actual button, in this case. And you need to make sure you’re targeting only the first one so it doesn’t trickle down to all anchor tags within the list item (i.e. the current drop down menu’s buttons).

    Taking these two things into account, it should look something like this:

    #access li.current-menu-parent > a { ... }
    #9081
    propagandalabs
    Participant

    Thx for the reply – both #access li.current-menu-item (and/or with its anchor > a) { … } work as intended, but #access li.current-menu-parent (and/or with its anchor > a) { … } don’t.

    example – note that the child on the left is fine, the parent does nothing http://bonsai-design.com/canopy-tours/

    #9082
    Jason Bobich
    Keymaster

    These classes work with the parent menu items of the menu you’ve setup, but you’re trying to communicate two different menus entirely.

    If you’ve never used an inspector like Firebug or Google Chrome’s inspector, you should definitely look into that. You can quickly see what classes are available to you for styling and that’ll make life much easier.

    For example, in your case, you can quickly see what you have to work with and why the classes you’re trying aren’t working:

    http://www.uploadblvd.com/uploads/image_51c386d78477f.png

    The only way I can think of to do this with how you’re setting things up is to manually style the different scenarios.

    Take the “Programs” set of pages for example:

    body.page-id-322 #access li.page-item-322,
    body.postid-333 #access li.page-item-322
    body.postid-334 #access li.page-item-322
    body.postid-335 #access li.page-item-322
    body.postid-336 #access li.page-item-322
    body.postid-337 #access li.page-item-322 {
    	…
    }
    #9129
    propagandalabs
    Participant

    I use Chrome and was trying to avoid id by id, but thank you.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The forum ‘Barely Corporate Responsive WordPress Theme’ is closed to new topics and replies.