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][fiddle]
===

Which will look like this:

![screenshot][screenshot]

If you only wanted to change the style while closed you could use the [`:not`][not] pseudo class selector like this:



    .dropdown:not(.open) > button {}

[fiddle]: http://jsfiddle.net/KyleMit/6gNER/
[screenshot]: http://i.imgur.com/IVID2fW.png
[not]: https://developer.mozilla.org/en-US/docs/Web/CSS/:not

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?

Change color of text in collapsed dropdown

You can try changing the `@grid-float-breakpoint` and the [recompiling][customize]

From the [navbar docs][navbar]:

> ### Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than `@grid-float-breakpoint`, and expands into its horizontal non-mobile view when the viewport is at least `@grid-float-breakpoint` in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is `768px` (the smallest "small" or "tablet" screen).

---

Or, if you don't want to re-compile, take [Skelly's code][skelly]:



<pre><code>@media (max-width: <b>767px</b>) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav&gt;li {
        float: none;
    }
    .navbar-nav&gt;li&gt;a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}
</code></pre>

### [Working Demo in jsFiddle][fiddle]


[customize]: http://getbootstrap.com/customize/
[navbar]: http://getbootstrap.com/components/#navbar
[skelly]: https://coderwall.com/p/wpjw4w
[fiddle]: http://jsfiddle.net/KyleMit/n97s3/

On a site that am working on I have changed the breakpoint with one pixel. When you open [this page](http://www.uitjesinarnhem.nl/) in a 768 pixel wide window, the topmenu does not disappear and the menu button that should appear is not there. 

When changed to a width of 767 pixels all is working fine. 

I can't figure out what I am missing here. 