Перекрывающееся изображение заголовка навигации начальной загрузки меняет положение в разных точках останова - PullRequest
Новая
       27

Перекрывающееся изображение заголовка навигации начальной загрузки меняет положение в разных точках останова

0 голосов
/ 09 сентября 2018

Я написал заголовок, содержащий перекрывающуюся навигацию. Теперь я хочу, чтобы при изменении размера области просмотра навигация оставалась на месте, но это не так: Когда размер заголовка изменяется, верхняя позиция панели навигации остается прежней.

Как мне добиться поведения, при котором нижний правый угол панели навигации всегда остается в правом нижнем углу строки заголовка. 

/****** 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 -->"
...