I've created a Dynamic Menu that highlights the selected page and colors for example the blog page "red" while the other links (home, about, contanct) remain white.

My question is how can I make the Dynamic Menu work when say the blog goes to /blog/page/2/ and have the blog remain red instead of dropping the highlight?

Here's the code for my menu.

< nav id="menu" class="mid" role="navigation">
  < ?php wp_nav_menu( array( 'theme_location' => 'primary-menu' ) ); ?>
< /nav>

Then, I register the menu inside the functions.php

add_action( 'init', 'register_my_menu' );
    function register_my_menu() {
        register_nav_menu( 'primary-menu', __( 'Primary Menu' ) );

Here's the CSS that highlights the .current-menu-item

#menu .current-menu-item a { opacity: 1.0; }

This is when the Menu is Active on example.com/work

menu active

This is when the Menu is Active on the example.com/blog *just the first blog page though menu active blog

This is the menu when it switches to example.com/blog/page/2, example.com/work/showcase/website1337 menu not active

How, can I make it so that the Dynamic Menu detects that /page/2 is still associated with the parent page "/blog/, /work/" and is still highlighted like images 1 and 2?

Thanks :3

1 Answer 1



#menu current_page_ancestor a { opacity: 1.0; }

Check this Menu Item CSS Classes

  • Thanks for sharing the Codex for this! I think this will lead me in the right direction to getting this to work. I just have to figure out if my menu is even connecting the parent pages, because when I add say .current-menu-parent or .current_page_ancestor it's not highlighting it.
    – Monstr92
    Feb 7, 2013 at 0:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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