highlight “parent” nav link when on “child” page

  • Resolved gallo

    (@gallo)


    17 years, 4 months ago

    hello.

    when i’m on a “child” page i would like the “parent” in the navigation to be highlighted/active.

    the theme i’m using has it’s own navigation.php page. here is the code:

    <div id="menu">
<ul id="nav">
<?php wp_list_pages('sort_column=menu_order&title_li=&depth=1'); ?>
</ul>
</div>

    could someone point me in the right direction?

    thank you.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter gallo

    (@gallo)

    17 years, 4 months ago

    i was thinking i’d find my answer here:

    http://codex.wordpress.org/Conditional_Tags

    i read through it but i don’t see the answer for my particular question.

    my thought is that it’s common for people to have wordpress websites/blogs with child pages that are intentionally not shown in the menu. but, when someone is at the child page they probably wouldn’t want the menu to show that none of the pages are active. seems logical to wish for the parent to be highlighted. am i wrong?

    if anyone has insight that would be wonderful.

    thanks again.

    Austin Matzko

    (@filosofo)

    17 years, 4 months ago

    when i’m on a “child” page i would like the “parent” in the navigation to be highlighted/active.

    wp_list_pages() adds the classes “current_page_parent” and “current_page_ancestor” to the parent list element, so you should be able to use that for highlighted styling.

    Thread Starter gallo

    (@gallo)

    17 years, 4 months ago

    thanks, this worked. much appreciated. : )

    jurjak

    (@jurjak)

    17 years, 3 months ago

    So how did you do?

    scott-karlins

    (@scott-karlins)

    17 years, 1 month ago

    Indeed!, How did you do it? Can you provide examples of your code?

    Thanks!
    Scott K.

    inko9nito

    (@inko9nito)

    16 years, 11 months ago

    Just add a selector for current_page_ancestor in your current_page_item declaration, so that they are styled the same. So, it would be:

    .current_page_item,
    .current_page_ancestor {
    …
    }

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘highlight “parent” nav link when on “child” page’ is closed to new replies.