Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap: Change Background Color Dropdown menu

At the moment i am using this template: http://getbootstrap.com/examples/navbar-fixed-top/

Is there any way to give the background in the dropdownmenu (The one that pops up, when the navbar collapses) another color than the navbar itself?

What i tried so far is this, without success:

.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #555555;
    background-color: #e7e7e7;
}
like image 509
user3645310 Avatar asked May 16 '14 16:05

user3645310


People also ask

How can I change bootstrap dropdown color?

Bootstrap 4 has an inbuilt class '. show' which is added to the navbar item when the dropdown menu expanded and the class is hidden when the dropdown menu when it is collapsed. The color of the dropdown can be changed using the show class.

How do you change the color of a drop down list?

To change the dropdown button color:Wrap your DropdownButton inside the Container . Inside the Container , add the decoration property and assign the BoxDecoration widget. Inside the BoxDecoration add the color property and assign the color of your choice. Run the app.

How do I change the background color in bootstrap?

We can add background color to a div by simply adding class “bg-primary”, “bg-success”, “bg-danger”, “bg-info”, and many more as shown in the following examples.


2 Answers

Use this

.navbar-nav > li > .dropdown-menu { background-color: #FF0000; }
like image 113
Dragonfly Avatar answered Oct 03 '22 23:10

Dragonfly


To get the background color of Bootstrap Navigation Menu dropdowns

.navbar-nav > li > .dropdown-menu a:link,
.navbar-nav > li > .dropdown-menu a:hover { background-color: #FF0000;}
like image 39
Akanksha Avatar answered Oct 03 '22 23:10

Akanksha