Set active appearance of a Dropdown Item in Bootstrap 4.5

Question

I have just started to create my own theme using SASS and Bootstrap, but I am having problems with an active appearance of an dropdown item inside a navbar. Honestly, I would like to change the hover appaerance as well.

My code looks like this:

<li class="nav-item dropdown">
<NavLink href="#" class="nav-link dropdown-toggle text-nowrap" data-toggle="dropdown">
                                        Admin
                        </NavLink>
                        <div class="dropdown-menu bg-customblue1">
                            <NavLink class="nav-link dropdown-item text-light" href="users">Users</NavLink>
                                        <NavLink class="nav-link dropdown-item text-light" href="roles">Roles</NavLink>
                        </div>
</li>

I have set the background color of the dropdown (dropdown-menu) according to my new theme (bg-customblue1) and each item to have text-light.

But the question is if there is a nice way involving SASS to get the active and hover appearances to follow that theme?

Thanks!

/Henrik

Answer 1

With Bootstrap the active item should have a class .active added, as explained in the docs here.

So you could modify the Bootstrap variables.scss and change both $dropdown-link-active-color and $dropdown-link-active-bg to the colors you want when active and $dropdown-link-hover-color & $dropdown-link-hover-bg for the colors on hover.

Or you could write your own SASS to achieve this:

.dropdown-menu {

  .dropdown-item:hover {
    color: $light;
    background-color: $customblue-1;
  }
  
  .dropdown-item.active {
    color: $light;
    background-color: $customblue-1;
    
    &:hover {
      background-color: $customblue-2;
    }
  }
}