Dropdown hower change color

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Dropdown hower change color

Sue Ridler pro asked 7 years ago

Hi I can change the dropdown background hover using dropdown-danger  (red) dropdown-info (light blue) but... I want to change dropdown background hover to mbd color orange and another menu to goldenrod. What do I put in my css code to do this?   Thanks

RestWish pro commented 7 years ago

Brilliant - Thanks :)

Michal Szymanski staff pro premium priority answered 7 years ago

Hi,

try this code.

HTML

Place custom class in your dropdown menu (I have used .dropdown-yourColor)

<!--Dropdown custom-->
<div class="dropdown">
<!--Trigger-->
<buttonclass="btn btn-primary dropdown-toggle"type="button"id="dropdownMenu1"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">Dropdown primary</button>
<!--Menu-->
<divclass="dropdown-menu dropdown-yourColor">
<aclass="dropdown-item"href="#">Action</a>
<aclass="dropdown-item"href="#">Another action</a>
<aclass="dropdown-item"href="#">Something else here</a>
<aclass="dropdown-item"href="#">Something else here</a>
</div>
</div>
<!--/Dropdown custom-->

CSS

Add to the custom class your color

<style>
.dropdown .dropdown-menu.dropdown-yourColor .dropdown-item:hover {
background-color: red!important;
}
</style>

Unfortunately, in your CSS code you have to use !important to overwrite mdb style.

RestWish pro commented 7 years ago

Worked perfectly - Thanks :)
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
Sue Ridler
Pro User
10Support score
6Questions 2Answers
0Snippets likes 0Snippets