What is the best way to include a black navbar alongside the current transparent navbar?

Is there a way to incorporate a black navbar below the "some text" in the existing navbar displayed below? The appearance of this new navbar doesn't matter as long as it spans the entire width of the screen under the text Some text. Any suggestions?

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

The layout appears similar to this image after introducing 

<div class="black-bar" style="width: 100vw; height: 80px; background-color: white"></div>
following h6:

htmlcssangularbootstrap-4navbar

Answer №1

If you want to add a black-bar below the < h6 > tag, you can use this code snippet:

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

Give it a try and let me know if it suits your needs!

Answer №2

If you're in search of a way to add a stylish black line underneath the "some text", consider using this code snippet:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Bootstrap multiple Angular 9 modules to enable running several applications concurrently on a single page

I have a project where I need to run two applications on the same page. Here's what I'm trying to do: <body> <app-main></app-main> <app-secondary></app-secondary> </body> The goal is for each application ...

htmlangulartypescriptbootstrap-4

Issue with Checkbox Element's Margin CSS Not Being Applied

Hello everyone, I'm feeling a bit puzzled as to why the margin in my CSS isn't applying correctly to the checkbox element. Below is an example of the code I'm using: HTML: <div class="panel"> <input id="bodytype-checkbox" ...

htmlcss

Removing the css class when an element loses focus

In order to improve user experience on my web page, I have implemented a validation check on a form before submitting it back to the server. The validation process is successful and applies a custom CSS class called ErrorControl to input fields when necess ...

javascriptcssasp.net

Breakpoint for mobile menu in FoundationCSS

When the browser is resized, the mobile menu appears at 568x320, which is the default breakpoint. https://i.sstatic.net/ZSbiq.jpg I would like to create a breakpoint around 900px to address the issue with the menu being too large as shown in the image be ...

jquerycssjquery-mobilezurb-foundation

Adjust font size based on screen dimensions

I am working on optimizing font sizes for different screen sizes in HTML elements. Currently, I use a script to dynamically adjust the font sizes based on window width, but it is making my code messy: <script> $(window).resize(function(){ $('#f ...

javascriptjqueryhtmlcss

Load and execute a dynamically created script in JavaScript at the same time

I am exploring the option to load and evaluate a script from a third-party synchronously. Here is an example that currently works well: <head> <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfe ...

javascripthtml

What is causing variations in the sizes of my HTML tables?

I am having some issues with a particular HTML snippet that I have included below: <table> <tbody> <tr> <td><table>...</table></td> <td><table>...</table></td> <td><tab ...

htmlcsshtml-table

What is the Best Way to Display an Image Field from a Django Model in Templates?

I'm having trouble displaying the uploaded image in the project template. This is the current state of my code: projects.html {% extends "base.html"%} {% block content%} <h1>{{ project.title }} HELLO</h1> <div class=" ...

pythonhtmldjango

What is the best way to implement seamless transitions between different components in my code?

I'm currently developing my own single page application and I want the content to have a smooth animation effect as I scroll down, instead of being static. Despite searching for guides on this topic, I haven't found any helpful resources yet. An ...

javascriptcssreactjstailwind-cssvite

Adjust the background color of a non-selected Material-UI checkbox

Currently, I am working with a combination of React-Redux and Material-UI to style my project. Within this setup, I have a checkbox component that is placed on a toolbar with a blue background color (#295ED9). So far, I have successfully altered the color ...

cssreactjscheckboxreact-reduxmaterial-ui

Set up a custom key combination to easily toggle between HTML and TypeScript files that share the same name

Is it possible to set up a keyboard shortcut (e.g. Ctrl + `) to toggle between mypage.html and mypage.ts files? In my project, I have one HTML file and one TypeScript (TS) file with the same names. Ideally, I'd like to create a hotkey similar to F7 fo ...

visual-studioangulartypescriptkeyboard-shortcutshotkeys

Ways to arrange objects to fill up space in a specific sequence

My HTML document contains two child HTML elements within the parent HTML. The parent HTML has a div with a class of .page, which is a large area for the children to occupy. Both children are of the same size and I need them to spawn in a specific order; fo ...

htmlcssangularcss-grid

Is there a way to display just one element without affecting the other elements within the same class?

I need to create a series of buttons that can appear and disappear when clicked. Here's how it should function: When I click on link 1 (link 2 is currently hidden). Link 2 should then become visible. The challenge lies in distinguishing between mu ...

javascriptjqueryhtml

tips for speeding up the styling process of web pages

As a new developer in a company without guidance from a senior developer, I often find myself questioning whether my work is on the right track. I worry that my code isn't up to par and that spending time styling pages with CSS may be a waste. If ther ...

javascriptcssreactjs

What is the best method for synchronizing the end_date picker with the start_date picker in an ionic2 app and vice versa

My goal is to dynamically adjust the end date picker based on the user's selection of the start date, and vice versa if the user decides to choose the end date first. Here is the code I have written: <ion-item> <ion-label>Start ...

typescriptangularionic2

Tips for ensuring overflow-y is always visible in full-screen mode

Upon enabling fullscreen mode, the y overflow disappears completely. The Chrome developer tools are displaying the following: https://i.sstatic.net/2hpmz.png Despite overwriting the :root:-webkit-full-screen-ancestor in my CSS and having my style appear ...

csshtml

Preventing Bootstrap 4 slider images from shifting position when using background-attachment:fixed for a parallax effect

I'm trying to implement a Parallax scrolling effect on my Bootstrap 4 slider. However, every time the slider switches to the next image, the image needs to readjust itself into place. How can I avoid this? .customOverlayText { position: absolute; ...

javascriptjqueryhtmlcssbootstrap-4

Code in Javascript to calculate the number of likes using Typescript/Angular

I have encountered a challenge with integrating some JavaScript code into my component.ts file in an Angular project. Below is the code snippet I am working on: ngOninit() { let areaNum = document.getElementsByClassName("some-area").length; // The pr ...

angulartypescriptangular13

Converting Text into HTML using Node.js

Currently, I am utilizing nodemailer to send emails from my node server. The content for these emails is fetched from a MSSQL SQL server and is formatted in plain text format, including newline characters. However, when sending the email using nodemailer, ...

htmlnodemailertext-to-html

When a DOM object is passed in JavaScript, its value becomes indeterminate

I am currently working on creating a table that can change its background color based on an RGB value. Each row in this table contains clickable <td> cells that contribute to the RGB value. For example, the first row might be +/- 123, the second row ...

javascripthtmldom