16

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

8 Answers 8

31

Use this

.navbar-nav > li > .dropdown-menu { background-color: #FF0000; } 
Sign up to request clarification or add additional context in comments.

4 Comments

Works perfectly for me.
Works like a charm!
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.
How about the class: dropdown-menu-light or similar?
7

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

Comments

5

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

Comments

2

Try this

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

Comments

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

1 Comment

unfortunately nothing happens when i use this
0
.nav .open>a {background: #yourcolor !important;} 

Comments

0

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

Comments

0

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.