I am facing this particular problem: How can I change the color of the navigation bar once the user clicks to one particular menu?, i.e., (I make click on the menu "Contact" and the navigation bar changes color to gray).

I found few articles to this problem but just one that got my attention: http://bit.ly/1Ku8hFT . It briefly says that the header.php file can allow this effect by modifying it with the is_page() function. FYI, I also examined the code from that file and I put below the specific lines of code that I believe I should put the condition to get the desired effect.

<nav id="site-navigation" class="main-navigation top-navigation" role="navigation">
        $anyMenu = get_terms( 'nav_menu' ) ? true :false;
        $menuSelect = get_theme_mod('my_theme_tho_header_menu_select');
    if ( $anyMenu && ( ( $menuSelect ) && ( $menuSelect !== 'none' ) ) ) :
        wp_nav_menu( array( 'menu' => $menuSelect, 'container_class' => 'header-menu' ) );
    elseif ( $anyMenu && ( !$menuSelect || ( $menuSelect == 'none' ) ) ) :
        $menu = get_terms( 'nav_menu' );
        $menu_id = $menu[0]->term_id;
        wp_nav_menu( array( 'menu_id' => $menu_id ) );
   elseif ( !$anyMenu ) :
        wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) );
</nav><!-- #site-navigation -->

I would like to know if someone has a better idea to get the desired effect I want (such as a plugin or if I need to look into another .php file and add some code rather than this one since I am not fully convinced that by modifying the header.php I will get the result. Lastly, the Word Press version I am running is 4.2.3.

All your comments, feedback and solutions will be totally appreciated.


I don't really understand what you're trying to do in your PHP.

Simplest way (and, in my opinion, the more elegant solution, as this is a presentational issue) would be to do this in CSS. By default, WordPress puts plenty of helpful CSS in your <body> tag, e.g.:

<body class="single single-post postid-53 single-format-standard logged-in admin-bar"> 

Full list of classes

parent-pageid-{ID} is a useful one if you have multiple child pages in a section.

So in your theme's CSS file you can control the the colour of your navigation bar according to what post, page or category is visible - e.g.

.page-id-1 .top-navigation {
  background-color: blue;

.page-id-2 .top-navigation {
  background-color: green;

Also see question about custom CSS for your homepage.

  • Your solution totally worked! Thank you very much for your support. – cp_miramar Aug 3 '15 at 20:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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