CODEWITHSUNDEEP
csstwitter-bootstrapdrop-down-menubackground-color
user3645310
user3645310

Reputation: 179

How can I change the background color of a Bootstrap dropdown?

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

Upvotes: 16

Views: 113953

Answers (8)

imdhemy
imdhemy

Reputation: 73

you can use a suitable @media screen value

to change the parent ul background use the following code:

@media (max-width: 768px){
  .dropdown-menu{
    /*property: value;*/
  }
}

Upvotes: 0

Akanksha
Akanksha

Reputation: 49

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

Upvotes: 5

imhsgoraya
imhsgoraya

Reputation: 11

When dropdown menu clicked then an "open" class has added by bootstrap so you can overwrite as following:

.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover {
    color: #555;
    background-color: #e7e7e7;
}

Upvotes: 0

wildnano
wildnano

Reputation: 21

.nav .open>a {background: #yourcolor !important;}

Upvotes: 0

Jonathan Odle
Jonathan Odle

Reputation: 69

Remember all you are doing with CSS is calling out what your HTML already reads. You need to get a tell the CSS what changes you want and from where. This code below should work with changing the background color of your drop down menu and the color of the font.

/* Dropdown menu background color*/

.navbar-nav > li > .dropdown-menu {     background-color: #e7e7e7;  }

/* Dropdown menu font color*/ 

 .navbar-nav > li > .dropdown-menu a{   color: #555555;  }

Upvotes: 7

Gurvir
Gurvir

Reputation: 29

Try this

.dropdown-menu > .active > a,.dropdown-menu > .active > a:hover.dropdown-menu > .active > a:focus {color: #555555!important; background-color: #e7e7e7!important;}

Upvotes: 2

Dragonfly
Dragonfly

Reputation: 427

Use this

.navbar-nav > li > .dropdown-menu { background-color: #FF0000; }

Upvotes: 31

Andrew Matthew
Andrew Matthew

Reputation: 432

ul.dropdown-menu {
    background-color: #000;
}

Upvotes: 0

Related Questions