How can I add a class to a nav menu when I'm viewing a child page?

Question

I'm using bootstrap in my theme, so I have a requirement that I add a class of active to the current nav menu item.

I was able to achieve this by using the nav_menu_css_class filter

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
     if( in_array('current-menu-item', $classes) ){
             $classes[] = 'active ';
     }
     return $classes;
}

The problem is, say the current page is 'about' -> 'locations'

then the 'about' nav menu looses its 'active' class because obviously it is no longer the current-menu-item but I also need it to have the 'active' class if I'm viewing one of its child pages

How would I go about solving this?

Answer 1

I figured out a way.

I changed the if statement to

 if (in_array('current-menu-item', $classes) || 
     in_array('current-page-ancestor', $classes)) {
          $classes[] = 'active ';
     }