ruby on rails - css not changing color on click -

do know how on facebook, when notifications, globe goes white, click on see them because happy. color stays white on globe unless click out or click globe. have exact same situation. when click on globe. icon stays white. unless click out anywhere loses white color. want able click on icon , expect colour go away.

scss:

.navbar-nav:not(.nav-badges) > li > { font-weight: bold; } .nav-badges {   margin-left: 20px;   & > li { height: 50px; }   .dropdown > a:focus { outline: 0px none; }   .dropdown-open {     background-color: $dropdown-bg;     & > { color: $dropdown-link-color; }     .dropdown-menu { display: block; }   } 

its pretty self explanitory, when icon not clicked, dropdown in play, when clicked, dropdown dropdown-open in play.

so sure facebook use javascript tricks reactjs it's pretty straight forward.

but, think can use css3 trick hidden checkbox , label. this trick looks match use case.

it's bad accessibility, it's tricky , should go javascript. it's fun.

you can add fixed overlay uncheck hidden checkbox. this, when clicking outside menu, checkbox unchecked , menu go normal state.

this pure css implementation can see. again, use javascript kind of behaviour.