active parent link and child link while on child page wordpress - css

Question

I am building this website where I have pages with child pages, when I click on the parent link in the navigation menu, I get redirected to that page. It will then display links to all its child pages on that page, my problem is that I want the parent page link in the navigation menu to always be highlighted even when I click on the child page link. So in the end both the parent page link AND the child page link should be highlighted.
I have tried some different things, but none seem to work, I can loop out all the child pages of the parent, but not make them highlighted.
<?php
if ( $post->post_parent ) :
$parent = $post->post_parent;
else :
$parent = $post->ID;
endif;
$childpages = get_pages('child_of=' . $parent . '&sort_column=menu_order');
?>
<div class="row pad60">
<ul class="category-nav column">
<?php foreach( $childpages as $childpage ) { ?>
<a href="<?= get_page_link( $childpage->ID ) ?>">
<li><div class="primary-btn"> <?= $childpage->post_title ?> </div></li>
</a>
<?php } // End foreach ?>
</ul>
</div>
This is what I am using right now, but I feel this isn't the right way to go in the first place..
Thank you!

Answer 1

WordPress has a build in CSS classes to target the menus. https://developer.wordpress.org/reference/functions/wp_nav_menu/#Menu_Item_CSS_Classes
// This will highlight all the current menus
.current-menu-item a {
color: blue;
}
/* This will highlight its parent, when you are in its child page. */
.current_page_parent a {
color: orange;
}