How to make parent menu active while child menu is active?

Hi manish,

I am a 2 years experienced web developer, I am very new to php and wordpress coding. I m developing one website from scratch and using bootstrap4 walker to create a menu.

My problem is, I am able to write css for active classes of nav items but when I have a child menu, it’s not showing the active menu color or hover effects, please help!

Let me know ‘How to make parent menu active while child menu is active?’

Answer:

Hi Utpal,  You are doing a great job.

Please add the following codes in your ‘functions.php’ before closing tag, if any

//make parent menu active while child menu is
add_filter('nav_menu_css_class', 'add_active_class', 10, 2 );

function add_active_class($classes, $item) {

  if( in_array( 'current-menu-item', $classes ) ||
    in_array( 'current-menu-ancestor', $classes ) ||
    in_array( 'current-menu-parent', $classes ) ||
    in_array( 'current_page_parent', $classes ) ||
    in_array( 'current_page_ancestor', $classes )
    ) {

    $classes[] = "active";
  }

  return $classes;
}