Keep Main Navigation underlined when viewing a Not Linked Page

It may be possible to do this with CSS only but it seems to me it would be a more tortuous route. Javascript seems a better fit here.

Add the following to Settings > Advanced > Code Injection > HEADER. The OP doesn't need to do this step as they already have jQuery installed.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Settings > Advanced > Code Injection > FOOTER.

<script>

  $( ( ) => {
  
    /*
    
      begin add navigation magazine underline to magazine subpages
      
      Version       : 0.1d0
      
      SS Version    : 7.1
      
      Dependancies  : jQuery
      
      By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      no user serviceable parts below
      
      */
      
      // bail if not magazine subpage
      
      if ( ! location.pathname.startsWith ( '/magazine/' ) ) return;
      
      $( '.header-nav-item [href="/magazine"]' )
      
        .parent ( )
        
        .addClass ( 'header-nav-item--active' );
        
      // end add navigation magazine underline to magazine subpages
      
    } );
    
  </script>

Let us know how it goes.

@creedon, this works great! thank you for this! it works great and am now just copying that for the different pages that have the same thing and replacing "magazine" with "blog", and it just works.  Thank you for sharing this approach.