Bootstrap导航重叠的标题图像在不同的断点处更改位置

Question

我写了一个包含重叠导航的标题。现在，我希望在调整视口大小时将导航保持在原位，但并不能： 调整标题图像大小时，导航栏的顶部位置保持不变。

如何完成导航栏右下角始终停留在标题行右下角的行为。

/****** Header *****/

.header-row{
  position: relative;
}

.header-img{
  position: relative;
}

.main-menu{
  position: absolute;
  background-color: rgba(0,0,0,0.5);
  top: 80%;
  margin: auto;
  z-index: 9999;
}

<div class="row header-row">
      <img class="header-img img-fluid w-100 h-100" src="<div class="row header-row">
      <img class="header-img img-fluid w-100 h-100" src="<div class="row header-row">
      <img class="header-img img-fluid w-100 h-100" src="https://via.placeholder.com/1050x380" alt="Header image" />

        <div class="main-menu w-100">
          <nav class="navbar navbar-expand-lg navbar-dark scrolling-navbar">
            <a class="navbar-brand d-lg-none d-xl-none" href="#">Menü</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
              <div class="navbar-nav">
                <a class="nav-item nav-link active" href="#">Über KuKMA<span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link" href="#">Themen</a>
                <a class="nav-item nav-link" href="#">Kontakte vor Ort</a>
                <a class="nav-item nav-link" href="#">Publikationen</a>
                <a class="nav-item nav-link" href="#">Newsletter</a>
                <a class="nav-item nav-link" href="#">Medientalente</a>
                <a class="nav-item nav-link disabled" href="#">Netzwerk</a>
              </div>
            </div>
          </nav>
        </div>

</div> <!-- header row -->"