如何将黑色导航栏添加到现有的透明导航栏？

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>

在h6后面加上<div class="black-bar" style="width: 100vw; height: 80px; background-color: white"></div>后看起来in this way：

Answer 1

您可以在 标签下放置一个 div。像这样的..

<div class="black-bar" style="height:100px; background-color: black; position:absolute; left:0; right:0;"></div>

希望这对你有用！

Answer 2

如果您只需要在“某些文本”下添加一条黑线，为什么不这样做：

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