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

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

You could put a div underneath the < h6 > tag. Something like this..
<div class="black-bar" style="height:100px; background-color: black; position:absolute; left:0; right:0;"></div>
Hope this works for you!

Answer 2

If you're just needing a black line under the "some text", why not do something like:
h6 {
width: 100%;
text-align: center;
border-bottom: solid 80px black;
}