Search code examples
cssbootstrap-4dropdown

How to change the DropdownToggle background color when click DropdownItem list in Bootstrap 4


I am trying to change the background colour of DropdownToggle when clicking DropdownItem. Also, change the top and bottom blue border(not sure)? when click the DropdownToggle

Picture 1: This is the picture that before I click the item such as "AK","CA","DE"

When I click the dropdown item "FL" in this case, the background colour change to black, and there are top and bottom blue border around the "FL"

Picture 2: after select(click) "FL"

How to change the DropdownToggle background colour when I click the item, i don't want black like the picture, and also try to remove the blue border.


Solution

  • Without your code added to the question I'm not able to be more specific, but you can access the elements in your nav with the following Bootstrap elements

    CSS

    .nav-item {}
    
    .nav-item a {}
    
    .nav-item a:hover {}
    
    .nav-item .dropdown-item {}
    

    Because you are over-riding Bootstrap CSS you will likely need to add !important; to the attributes that you change.