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

Question

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

nicael · Accepted Answer · 2015-04-05 14:14:52Z

31

Use this

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

edited Apr 5, 2015 at 14:14

nicael

19.1k13 gold badges65 silver badges93 bronze badges

answered Apr 5, 2015 at 12:21

Dragonfly

4274 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Pabi Over a year ago

Works perfectly for me.

Santiago Carmona González Over a year ago

Works like a charm!

Pangit Over a year ago

Please explain this notation using the 'arrows' (".navbar-nav > li > .dropdown-menu")...is this something unique to Bootstrap 4 or is this CSS3...? I thank you in advance.

Eugen Konkov Dec 18, 2024 at 2:59

How about the class: dropdown-menu-light or similar?

Essex · Accepted Answer · 2016-12-29 21:56:37Z

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

Akanksha · Accepted Answer · 2020-02-06 04:36:06Z

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

CinCout · Accepted Answer · 2016-06-24 06:48:32Z

Try this

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

Martin Prikryl · Accepted Answer · 2014-05-16 16:41:02Z

0

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

edited May 16, 2014 at 16:41

Martin Prikryl

205k64 gold badges560 silver badges1.1k bronze badges

answered May 16, 2014 at 16:04

Andrew Matthew

4321 gold badge5 silver badges15 bronze badges

1 Comment

user3645310 Over a year ago

unfortunately nothing happens when i use this

wildnano · Accepted Answer · 2017-01-12 21:44:06Z

0

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

edited Jan 12, 2017 at 21:44

answered Jan 12, 2017 at 21:32

wildnano

211 gold badge3 silver badges5 bronze badges

Comments

Kurohige · Accepted Answer · 2019-07-10 17:31:03Z

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

3 revs, 2 users 81% · Accepted Answer · 2020-02-06 16:37:49Z

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

Collectives™ on Stack Overflow

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

8 Answers 8

4 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

4 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Linked

Related