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

Well, what do you mean by a nice way involving SASS? Do you want to change the value directly within the Bootstrap variables.scss or do you want to overwrite the value externally - then Sass absolutely not required. Nevertheless .dropdown-item.active, .dropdown-item:active is the selector. — Simplicius
what I mean by that is that if i create a theme using sass, it would be great if you could assign specific classes to the html elements so that you get the correct effect based on the created theme. Overriding a class using css in the web page directly wasnt exactly what I had in mind, but I understand that it will work. So that was my idea with the writing. — Henrik Bengtsson

Alessandro Alessandro · Accepted Answer · 2020-09-15T07:59:07

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

Set active appearance of a Dropdown Item in Bootstrap 4.5

1 Answers