I'm trying to have menu items show an underline under the related nav item when when the user on a specific page (image attached).

In the static site version of the site I'm doing I had a php variable at the top of each page such as:

<?php $page = "home"; ?>

Then in the menu item in the header, I did the following which added a 'page_active' class when someone is on the relevant page, which I could then style accordingly with CSS:

<li><a href="./" class="<?php if ($page=="home"){echo 'page_active';}?>">HOME</a></li>

Now I've moved it over to a custom WordPress theme this isn't working. I'm placing the variable above the get_header() function on each page:

<?php $page = "home";?>
<?php get_header();?>

Because this site has a couple of large submenus in the nav, using the is_page() function to detect the page url isn't going to work. For instance I have 11 submenu items under one of the main menu items.

** EDIT ** I've added two further pictures showing that when you click on one of the submenu items and got to a 'Practice Area' page, the parent 'Practice Area' menu item is underlined. This is from a static site version where I used the php code above.