CODEWITHSUNDEEP
twitter-bootstrapdrop-down-menutwitter-bootstrap-3navbar
Hejhejhej123
Hejhejhej123

Reputation: 1195

Change color of text in collapsed dropdown

Where can I change color of text in collapsed dropdown? For some reason there's different background and text colors in my dropdown menu when its collapsed.

When not collapsed I can change it with:

.navbar-inverse .navbar-nav > li > a {
  color: #000;
}

But when collapsed it won't change. Am I missing something simple?

Upvotes: 2

Views: 2586

Answers (2)

Ronen
Ronen

Reputation: 31

It looks like a bug in bootstrap which overwrites collapsed navigation colors with the navbar-default ones (see bootstraps navbar.less line 468).

In order to fix it add the following less code after importing bootstrap to your project:

@media (max-width: @grid-float-breakpoint-max) {

 .navbar-default .navbar-nav .open .dropdown-menu {
   > li > a {
     color: @dropdown-link-color;
     &:hover,
     &:focus {
       color: @dropdown-link-hover-color;
       background-color: @dropdown-link-hover-bg;
     }
   }
   > .active > a {
     &,
     &:hover,
     &:focus {
       color: @dropdown-link-active-color;
       background-color: @dropdown-link-active-bg;
     }
   }
 }

}

Upvotes: 0

KyleMit
KyleMit

Reputation: 29937

When the dropdown is open, it will have the open class added to the parent dropdown element. You can use that to selectively style a closed / open dropdown.

For example, take the following HTML:

<div class="dropdown">

    <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
        Action <span class="caret"></span>
    </button>

    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>

</div>

We can add a color property to the dropdown and then change the color property when open using the following CSS: *(you might have to use !important if the button is styled)

.dropdown > button {
    color: yellow;
}
.dropdown.open > button {
    color: orange;
}

Working Demo in JsFiddle

Which will look like this:

screenshot

If you only wanted to change the style while closed you could use the :not pseudo class selector like this:

.dropdown:not(.open) > button {}

Upvotes: 1

Related Questions