Как я могу добавить черный navbar к существующему прозрачному navbar?

Question

У кого-нибудь есть идеи, как я могу добавить черную панель навигации ниже "некоторого текста" в панели навигации, показанной ниже? Неважно, как будет выглядеть эта навигационная панель, я бы хотел, чтобы она располагалась по всей ширине экрана под строкой Some text. Есть идеи?

<nav class="navbar navbar-expand-lg fixed-top navbar-transparent" color-on-scroll="500">
  <div class="container">
    <div class="navbar-translate">
      <button class="navbar-toggler navbar-burger" type="button" data-toggle="collapse" data-target="#navbarToggler"
              aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"
              (click)="sidebarToggle()">
        <span class="navbar-toggler-bar"></span>
        <span class="navbar-toggler-bar"></span>
        <span class="navbar-toggler-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="navbarToggler">


      <div class="outer">
        <div class="middle">
          <div class="inner">
            <br><br><br>
            <h6 align="center">Some text</h6>
            <div class="black-bar" style="width: 100vw; height: 80px; background-color: white"></div>

          </div>
        </div>
      </div>


      <ul class="navbar-nav ml-auto">
        <li class="nav-item" *ngIf="!isDocumentation() && !isMain()">
          <a class="nav-link" rel="tooltip" title="Follow us on Twitter" data-placement="bottom"
             href="https://twitter.com/CreativeTim" target="_blank">
            <i class="fa fa-twitter"></i>
            <p class="d-lg-none">Twitter</p>
          </a>
        </li>
        <li class="nav-item" *ngIf="!isDocumentation() && !isMain()">
          <a class="nav-link" rel="tooltip" title="Like us on Facebook" data-placement="bottom"
             href="https://www.facebook.com/CreativeTim" target="_blank">
            <i class="fa fa-facebook-square"></i>
            <p class="d-lg-none">Facebook</p>
          </a>
        </li>
        <li class="nav-item" *ngIf="!isDocumentation() && !isMain()">
          <a class="nav-link" rel="tooltip" title="Follow us on Instagram" data-placement="bottom"
             href="https://www.instagram.com/CreativeTimOfficial" target="_blank">
            <i class="fa fa-instagram"></i>
            <p class="d-lg-none">Instagram</p>
          </a>
        </li>
        <li class="nav-item" *ngIf="!isDocumentation() && !isMain()">
          <a class="nav-link" rel="tooltip" title="Star on GitHub" data-placement="bottom"
             href="https://www.github.com/CreativeTimOfficial/pk2-angular" target="_blank">
            <i class="fa fa-github"></i>
            <p class="d-lg-none">GitHub</p>
          </a>
        </li>
        <li class="nav-item" *ngIf="!isDocumentation()">
          <a href="http://pk2-angular.creative-tim.com/documentation/tutorial" class="nav-link" target="_blank"><i
            class="nc-icon nc-book-bookmark"></i> Documentation</a>
        </li>
        <li class="nav-item" *ngIf="!isHome()">
          <a [routerLink]="['/home']" *ngIf="!isDocumentation()" class="nav-link"><i class="nc-icon nc-layout-11"></i>Components</a>
          <a [routerLink]="['/home']" *ngIf="isDocumentation()" class="nav-link">Back to Kit</a>
        </li>
        <li class="nav-item" *ngIf="isDocumentation()">
          <a href="https://github.com/creativetimofficial/pk-free-angular/issues?ref=pk2-free-local" target="_blank"
             class="nav-link">Have an issue</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Это выглядит таким образом после добавления <div class="black-bar" style="width: 100vw; height: 80px; background-color: white"></div> после h6:

Answer 1

Если вам просто нужна черная линия под «некоторым текстом», почему бы не сделать что-то вроде:

h6 {
    width: 100%;
    text-align: center;
    border-bottom: solid 80px black;
}

Answer 2

Вы можете поместить div под тегом

. Как то так .. <div class="black-bar" style="height:100px; background-color: black; position:absolute; left:0; right:0;"></div> Надеюсь, это работает для вас!