How to add an element in a menu vertical-CodePudding

In fact, I use Bootstrap 5 for the create of a menu vertical.

My problem is that I would like to add a black background to the top of the left menu.

I don't understand where I should create the block in Bootstrap or CSS, please

<!DOCTYPE html>
<html>
   <head>
      <title>HTML CSS JS</title>
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

CodePudding user response：

You can add parent div to both the menus and add class d-flex to parent class

please check this :

.navbar {
  height: 60px;
  width: 100%;
  background: #000;
}

<!DOCTYPE html>
<html>

<head>
  <title>HTML CSS JS</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/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>