I want to put hover into the element inside the sidebar that I already have.
I try to use hover ,but it seems not working. I appreciate every answer.
.sidebar .navbar .nav-link:hover{
color: #EFDBFF;
display: block;
background: white;
border-color: #EFDBFF;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<header class="header row ">
<div class="d-flex justify-content-between">
<div id="logo" class="pb-2 ps-2 pe-0 col-2">
<img class="float-start py-2 ps-2 pe-2" src="assets/img/unknown.png">
<a href="#" class="sidebar-toggler flex-shrink-0" id="menu-toggle">
<i class="fa-solid fa-angle-left py-4 pe-2"></i>
</a>
</div>
</div>
</header>
<div class="body row ">
<div class="sidebar col-2 " id="sidebar">
<!--sidebar start-->
<div class="navbar-nav w-100">
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"><i class="fa fa-laptop me-2"></i>Admin</a>
<div class="dropdown-menu bg-transparent border-0">
<a href="#" class="dropdown-item">A</a>
<a href="#" class="dropdown-item">B</a>
<a href="#" class="dropdown-item">C</a>
</div>
</div>
<a href="#" class="nav-item nav-link"><i class="fa fa-th me-2"></i>Cập nhật PO</a>
<a href="#" class="nav-item nav-link"><i class="fa fa-keyboard me-2"></i>Phân loại PO</a>
<a href="#" class="nav-item nav-link"><i class="fa fa-chart-bar me-2"></i>Ước tính rebate</a>
<a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Cập nhật rebate</a>
<a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Báo cáo</a>
<a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Tra cứu thông tin</a>
<a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Hướng dẫn sử dụng</a>
</div>
<!--sidebar end-->
</div>
<div class="content col-10"> Content
</div>
</div>
<script src="https://kit.fontawesome.com/60bf89e922.js" crossorigin="anonymous"></script>>Solution :
your css selector is wrong
this will solve your problem
.sidebar .navbar-nav .nav-link:hover{
color: #EFDBFF;
display: block;
background: white;
border-color: #EFDBFF;
}