Jekyll Bootstrap navbar with dropdowns: I need help highlighting parent of active child page

I realize this question was asked by Jacob Hughes in 2015, Highlighting the Active Parent in Multi-Level Navigation Header with Jekyll and Bootstrap but it looks like Jacob never received an answer to his final question. I am currently faced with the same scenario and cannot figure out how to add highlighting to the navbar for the parent of the active page. So I have essentially revised Jacob’s question in hopes to find a suitable solution. I’m using Jekyll and Bootstrap; my navbar has several dropdown menus. (To keep it short, I’m only using Services and Products in the example below) I would like the parent item (e.g., Services) to be highlighted in the navbar whenever the user is on a corresponding child page (e.g., Services > Pet Sitting).

My Jekyll navigation file (navigation.yml) is in the following format:

- title: Services
  url: /services
  subpages:
    - title: Pet Sitting
      url: /pet-sitting
    - title: Pet Bathing
      url: /pet-bathing
    - title: Dog Walking
      url: /dog-walking

- title: Products
  url: /products
  subpages:
    - title: Pet Food
      url: /petfood
    - title: Pet Toys
      url: /pet-toys
    - title: Pet Treats
      url: /pet-treats

—— navmenu.html ————

‭<nav id=“site-nav” class="navbar navbar-expand-lg navbar-light bg-light">‬
‭  <div class="container-fluid">‬
‭    <a class="navbar-brand" href="#">Navbar</a>‬
‭    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">‬
‭      <span class="navbar-toggler-icon"></span>‬
‭    </button>‬
‭    <div class="collapse navbar-collapse" id="navbarSupportedContent">‬
‭      <ul class="navbar-nav me-auto mb-2 mb-lg-0">‬
                {% for section in site.data.navigation %}
                <li class="nav-item dropdown " >
                    <a class=“nav-link dropdown-toggle” href="{{ section.url }}">{{ section.title }}</a>
                    {% if section.subpages %}
                    <ul class="dropdown-menu " >
                        {% for page in section.subpages %}
                        <li ><a class=“dropdown-item” href="{{ page.url }}">{{ page.title }}</a></li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                </li>
                {% endfor %}                
            </ul>        
        </div>
    </div>
</nav>

—— css ——

#site-nav>li>a{color: black;}
#site-nav>li>a.selected{background-color:red; color:white;}
#site-nav>li>a.current{background-color:white; color:black;}

Is there a way to add highlighting to the navbar for the parent of the active page?