Bootstrap 5 nav dropdown hidden behind iframe

Using Bootstrap v5.0.2

I'm migrating the frontend of a legacy application to Bootstrap as well as replacing a frameset with iframes. There are two iframes involved; one that contains site navigation (top) and the other that displays content (bottom). The top iframe has a bootstrap navbar with navigation elements on the left side, and an optional search form on the right. The navigation dropdown items hide behind the bottom iframe when clicked, but the form select options appear above the bottom iframe when clicked. I would say this is a z-index issue but I can't be sure. I have tried this in Chrome, Firefox, Brave and Edge browsers with same result.

Is this a z-index issue, or something else?

Code and screenshots below:

• iframes

<!---   iframe for navigator  --->
<iframe scrolling="no" src="xxx" name="navigatorFrame" id="navigatorFrame" width="100%"></iframe>
<!---   iframe for content --->
<iframe src="" name="content" id="content" width="100%"></iframe>

• bootstrap navbar code

    <nav class="navbar navbar-expand navbar-light heading fw-bold" role="navigation">
      <div class="container-fluid text-nowrap">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#"><img src="house-fill.svg" class="pb-1">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Items</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Shop</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="reportDropdown" role="button" data-bs-toggle="dropdown">Reports</a>
            <ul class="dropdown-menu" >
              <li><a class="dropdown-item" href="#">Query Builder</a></li>
              <li><a class="dropdown-item" href="#">Repair</a></li>
              <li><a class="dropdown-item" href="#">Test</a></li>
            </ul>          
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Tools</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Support</a>
          </li>
        </ul>
        <form class="d-flex heading" action="#" method="post" name="advsearch" id="advsearch" target="content">
          <select class="form-select-sm me-1" name="SearchFieldSl" id="SearchFieldSl" style="width: 160px;" size="1">
            <option value="box1">box1</option>
            <option value="box2">box2</option>
            <option value="box3">box3</option>
            <option value="box4" selected>box4</option>
            <option value="box5">box5</option>
            <option value="box6">box6</option>
          </select>
          <button type="submit" name="Go" id="Go" class="btn btn-light btn-sm mx-2">Go</button>
        </form>
      </div>
    </nav>

• Screenshot navbar dropdown behind iframe ( error message if from bottom iframe for page that doesn't exist yet )

• Screenshot form select box showing above iframe