CODEWITHSUNDEEP
csstwitter-bootstrapdrop-down-menu
Sabian
Sabian

Reputation: 155

Bootstrap's "dropdown open" background color

I'm trying to change the background color of the li element when it's class changes from "dropdown" to "dropdown open" on click. I've managed to successfully change the color of the text (which is an a). However I can't change the parent li properties.

I've copied the code here: http://www.bootply.com/FK88owgjgL. At the end of the CSS file you'll see what I've managed to code concerning background color of the li and of it's child. I can't understand why font color works and background doesn't.

Any help will be much appreciated.

Thanks for your time

Upvotes: 0

Views: 4246

Answers (2)

Stickers
Stickers

Reputation: 78686

I think the problem is related to the floating elements inside the form, adding clear fix will help.

.navbar-right .dropdown-menu form:after {
    content: "";
    display: table;
    clear: both;
}

And there is a bit extra background at the bottom due to the parent margin, which can be rest.

.navbar-right {
    margin-bottom: 0;
}

Use this below, if you need to change the background of the search item itself(with the magnifying glass) when active.

li.dropdown.open > a:focus {
  color: #000;
  background: red;
}

DEMO: http://jsfiddle.net/1ub60vcj/3/

Upvotes: 1

AndrewL64
AndrewL64

Reputation: 16311

Is this what you want: http://www.bootply.com/rzkcuqK3jA

.nav.navbar-right.navbar-nav.bot-search  {
    background-color: #000;
    margin: 0 -15px;
    padding: 5px 0px;
}

Upvotes: 0

Related Questions