You’ve got a CSS problem, but you probably knew that already. There is a good post in this community “Highlight the parent menu-item when child menu item page is selected/loaded” that appears to offer a solution. But putting this into place in your site is easier said than done because of the rich variety (ahem) of CSS files being loaded on your site.
For example, the “blue” underline in the menu comes from “border-bottom-colour” in main-style.css; the “color” of the active menu text from post-33.css; the default (non-active) menu color (light grey) from global.css; menu padding from both frontend.min.css and post-33.css.
However, if you add the following CSS to, say, post-33.css, you should have success.
li.current-page-ancestor a {
color: #6ec1e4 !important;
border-bottom-color: #6ec1e4 !important;
border-bottom-style: solid !important;
border-bottom-width: thin;
}
If you would like to look at an alternative, or if your site become more complicated, then Bill Erickson posted a very useful, well explained article on his blog “Customize which menu item is marked active” in which he creates a filter to control the highlighted menu depending on which specific pages, tags and categories are being displayed.
One other thing: at the bottom of your About page, you have links for Elmhurst College and Virginia Tech. Both of these open in the same page as your site – that is, they take your visitors away from your site. You might find that it is better to add:
target="_blank"
to those links so that they each open in a new tab.