Controlling states of navbar-toggle button in mobile view

Question

As it stands when I activate my navbar dropdown toggle button in mobile view, its color goes from dark black (hover color) to grey, as the menu drops down. However, when you click outside of the button, it reverts to its default, non-hover color (lighter shade of black), despite the menu still being dropped down.

So, my first question is, how do I maintain that active color regardless of what you do as long as the menu is dropped down?

My second problem is, when you click the button for the second time, causing the menu to hide, it maintains its active color (grey); I want it to inherit its default, non-hover color of the lighter shade of black.

How do I do this? Bootply

HTML:

        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">

                <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
              <div class="collapse navbar-collapse navHeaderCollapse">

                    <ul class="nav navbar-nav navbar-right">

                        <li class = "dropdown"> 
                            <a href = "" class = "dropdown-toggle" data-toggle = "dropdown"><span></span></a>
                            <ul class = "dropdown-menu">
                                <li><a href = "#"></a></li>
                                <li><a href = "#"></a></li>
                            </ul><!-- END: "dropdown-menu" -->      
                        </li><!-- END: "dropdown" -->

                    </ul><!-- END: "nav navbar-nav navbar-right" -->
                </div><!-- END: "collapse navbar-collapse navHeaderCollapse" -->
              </div><!-- END: "container" -->
        </div><!-- END: "navbar navbar-inverse navbar-fixed-top" -->

CSS:

.navbar-inverse .navbar-toggle:hover {
  background-color: #000000;
}
.navbar-inverse .navbar-toggle:focus {
    background-color: #666666;
}

Answer 1

If there's a way to do that with just CSS, I don't know how. To do what you want, first you need a couple CSS changes, then some Javascript (I'm using jQuery here for convenience).

First, delete the .navbar-toggle:focus definition, since :focus can't do what you want.

Second, put your desired background color in a class that you will toggle on and off (I'll call it .menuActive).

.menuActive { background-color: #666; }

Third comes the toggling code. If I understand you correctly, you want bg color to turn grey when the user clicks and the menu appears, and then revert to the default color when the user clicks again and the menu disappears. Assuming you're using jQuery, insert the following into your $(document).ready():

$('.navbar-toggle').click(function() {
    $(this).toggleClass('menuActive');
});

If you need more control than .toggleClass() gives you, you can also keep track of the state yourself and use the .addClass() and .removeClass() methods.