Question

Does anyone have an idea how can I add black navbar below "some text" in navbar shown below? It doesn't matter how this navbar will look like I would like to have it just across the entire width of the screen below the string Some text. Any ideas?

<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>

It looks in this way after adding <div class="black-bar" style="width: 100vw; height: 80px; background-color: white"></div> after h6:

Answer 1

你可以在＆lt;下面放一个div。 h6＆gt;标签。像这样......

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

希望这适合你！

Answer 2

如果您只是需要在＆＃34;某些文字＆＃34;下面的黑线，为什么不这样做：

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

How can I add black navbar to the existing transparent navbar?

2 个答案: