Guide on inserting an item into a vertical navigation menu

When it comes to creating a vertical menu, I rely on Bootstrap 5.

https://i.sstatic.net/8CWYK.png

The issue I'm facing is how to add a black background to the top of the left menu.

https://i.sstatic.net/yoEcO.png

I am unsure whether I should implement this using Bootstrap or CSS. Can someone please guide me?

<!DOCTYPE html>
<html>
   <head>
      <title>HTML CSS JS</title>
      <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="47252828333433352637077269776975">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
   </head>
   <body>
      <div class="d-flex flex-column vh-100 flex-shrink-0 p-3 text-white bg-dark" style="width: 250px;">
         <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
            <svg class="bi me-2" width="40" height="32"> </svg>
            <span class="fs-4">BBBootstrap</span> 
         </a>
         <div>
         </div>
         <hr>
         <ul class="nav nav-pills flex-column mb-auto">
            <li class="nav-item">
               <a href="#" class="nav-link active" aria-current="page"> <i class="fa fa-home"></i><span class="ms-2">Home</span> </a>
            </li>
            <li>
               <a href="#" class="nav-link text-white"> <i class="fa fa-dashboard"></i><span class="ms-2">Dashboard</span> </a>
            </li>
            <li>
               <a href="#" class="nav-link text-white"> <i class="fa fa-first-order"></i><span class="ms-2">My Orders</span> </a>
            </li>
            <li>
               <a href="#" class="nav-link text-white"> <i class="fa fa-cog"></i><span class="ms-2">Settings</span> </a>
            </li>
            <li>
               <a href="#" class="nav-link text-white"> <i class="fa fa-bookmark"></i><span class="ms-2">Bookmarks</span> </a>
            </li>
         </ul>
         <hr>
      </div>
   </body>
</html>

cssbootstrap-5

Answer №1

You have the option to include a parent div for both menus and assign the class d-flex to the parent class.

Take a look below: 

.navbar {
  height: 60px;
  width: 100%;
  background: #000;
}
<!DOCTYPE html>
<html>

<head>
  <title>HTML CSS JS</title>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d1f1212090e090f1c0d3d48534d534f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>
  <div class="d-flex">
    <div class="d-flex flex-column vh-100 flex-shrink-0 p-3 text-white bg-dark" style="width: 250px;">
      <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
        <svg class="bi me-2" width="40" height="32"> </svg>
        <span class="fs-4">BBBootstrap</span>
      </a>
      <div>
      </div>
      <hr>
      <ul class="nav nav-pills flex-column mb-auto">
        <li class="nav-item">
          <a href="#" class="nav-link active" aria-current="page"> <i class="fa fa-home"></i><span class="ms-2">Home</span> </a>
        </li>
        <li>
          <a href="#" class="nav-link text-white"> <i class="fa fa-dashboard"></i><span class="ms-2">Dashboard</span> </a>
        </li>
        <li>
          <a href="#" class="nav-link text-white"> <i class="fa fa-first-order"></i><span class="ms-2">My Orders</span> </a>
        </li>
        <li>
          <a href="#" class="nav-link text-white"> <i class="fa fa-cog"></i><span class="ms-2">Settings</span> </a>
        </li>
        <li>
          <a href="#" class="nav-link text-white"> <i class="fa fa-bookmark"></i><span class="ms-2">Bookmarks</span> </a>
        </li>
      </ul>
      <hr>

    </div>
    <nav class="navbar navbar-light">
      <a class="navbar-brand" href="#">Navbar</a>
    </nav>
  </div>

</body>

</html>

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

What are some techniques for styling a field when the div id is not specified?

I need to customize a data field within a table, but I am unable to locate or identify its div ID. Here is the page source: <tbody> <tr> <td style="font-size:12px; text-align:center;" name=""> <div sty ...

javascripthtmlcss

How can I add text to a bar or table using CSS/HTML?

I am trying to create a design similar to this: http://img291.imageshack.us/img291/5571/bartablestyling.png Currently, I only have the top bar in place. When I attempt to add text, it ends up below the profile picture. I want to avoid using float:left ...

htmlcss

Picture failed to load

I am struggling to get an image to display on my webpage, as only the alt text is appearing. Here is the code I am using: return ( <> <div className="container my-5"> <div className="row ju ...

javascriptreactjsbootstrap-5

Using a <div> to contain <mat-card> in Angular Material

Can you achieve the following: Show components with specified width in a row instead of the usual column layout Enclose the cards within another defined container I've been attempting to accomplish this but without success so far.... While materia ...

htmlcssangularangular-material

Guide to emphasizing a specific term within a string by utilizing coordinates in javascript

I am facing a challenge when trying to highlight multiple words within a sentence. Specifically, I have text data that looks like this: "The furnishing of Ci Suo 's home astonished the visitors: a home of 5 earthen and wooden structures, it has a sit ...

javascripthtmlcssvue.js

Table with expansive width housed in a div container but the div container fails to

How can I make a parent div expand when the child table exceeds the page width? What is the most effective CSS approach to achieve this? ...

htmlcssxhtml

How to troubleshoot Javascript code that fails to identify if a color is white

What could be causing my code to malfunction? I am attempting to determine if the paragraph text color is white (as determined by CSS settings). If it is indeed white, I want to change it to black for better visibility. function adjustColor() { if (d ...

javascripthtmlcss

Customize Bootstrap 4's .btn-link style to include a smooth transition for under

Recently, I've been working on customizing Bootstrap 4's .btn-link by adding a special hover effect - a line that smoothly transitions from left to right beneath the link when the mouse hovers over it. Although things are mostly going according ...

cssbootstrap-4

Struggle for dominance between Bootstrap carousel and Flexslider

Issue with Bootstrap carousel and Flex-slider. When both included, the flex slider does not work properly if I remove bootstrap.js. However, without bootstrap.js, the flex slider works but the carousel malfunctions. Code Snippet: <div class="carousel- ...

jqueryhtmlcsstwitter-bootstrapflexslider

Paragraph Separated by Bullets Without Bullets At End of Line

I need assistance in creating a unique type of list that I call a "bullet separated paragraph list" by using a javascript array of strings. For example: item • item • item • item • item     item • item • item • item item • ...

javascripthtmlcss

Having trouble getting SCSS to function properly? (Updated Code)

Transitioning from CSS to SCSS is my current project. I decided to make the switch because of SCSS's nesting capabilities, which I find more convenient for coding. However, I'm facing some challenges getting it to work properly. In my regular CSS ...

htmlcsssass

Change the Label in a TextField Component with Material UI

How do I customize the label of a TextField and prevent a grey background color from appearing after selecting an item in Material UI? To view the solution, please visit this CodeSandbox link: CLICK HERE Label Customization Issue: https://i.sstatic.net/1 ...

cssreactjsmaterial-uijss

Tips for adjusting column spacing in HighCharts

Looking for some advice on how to make a chart container scrollable and properly space the labels and bars within a parent container with fixed width and height. The goal is to ensure all labels are visible and bars are well spaced. Any suggestions or tips ...

jqueryhtmlcsshighcharts

Combine and interchange horizontal and vertical form designs within antd 5 for a personalized touch

I need to customize the layout of a form to display checkboxes in vertical mode. Specifically, there is a row of checkboxes that I want to appear vertically aligned rather than horizontally. In the past, I was able to achieve this in antd 4 by applying a ...

javascriptcssreactjsantd

Stable header that jumps to the top when scrolled

I have implemented the JavaScript code below to set the header to a fixed position when it reaches the top of the page so that it remains visible while the user scrolls. Everything appears to be functional, but the header movement is abrupt and not smooth. ...

javascriptjqueryhtmlcss

Clarification: Javascript to Toggle Visibility of Divs

There was a similar question that partially solved my issue, but I'm wondering if using class or id NAMES instead of ul li - such as .menu, #menu, etc. would work in this scenario. CSS: div { display:none; background:red; width:200px; height:200px; } ...

javascriptcsshtml

Utilize the scrollIntoView method within a jQuery function

My current setup involves using JQuery's show and hide function. Essentially, when an image is clicked, it triggers the display of an information log. The issue I am facing is that this log opens at the top of the page, whereas I would like it to scro ...

javascriptjqueryhtmlcss

When using the background-blend-mode property, transition-duration is not taken into account

Try hovering over the top left h1 element in this code example You'll notice that it smoothly changes the h1 element to a shade of blue in just 2 seconds. However, the transition doesn't affect the blend mode of the backgrounds. Even though the ...

css

The footer is anchored at the bottom on one page but mysteriously relocates to the center on the next page

I've been working on creating a footer for my Angular application and here's the code for it: // HTML <footer class="footer"> // code for footer </footer> // LESS .footer { position: absolute; bottom: 0; width: 100% ...

htmlcssless

How Webpack 4 Utilizes splitChunks to Create Numerous CSS Files

I need to create multiple CSS files using webpack 4 with the min-css-extract-plugin and splitChunks plugin. Here is my webpack configuration. const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const path = require("path"); module.exports = ...

csswebpackwebpack-4webpack-splitchunks