CODEWITHSUNDEEP
twitter-bootstrapdrop-down-menutoggle
Piotr Ciszewski
Piotr Ciszewski

Reputation: 1791

How to change background colour of opened bootstrap dropdown list

How to change background colour, let's say to red of opened bootstrap dropdown option. Here is the code:

    <nav class="navbar navbar-default" role="navigation">
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">WOMEN<b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">MEN<b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Something</a></li>
          <li><a href="#">Another something</a></li>
        </ul>
      </li>          
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

and css:

    .navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}

Whay I want to do is when you click on the button (for example WOMEN) it will change the colour of text to red and background of the main option (WOMEN) to green and stays like that until I toggle click or choose another option (MEN) from main menu

Thank you

Here is jsfiddle

Upvotes: 0

Views: 5428

Answers (1)

Jinu Kurian
Jinu Kurian

Reputation: 9416

I hope this is what you want. When you click on a dropdown, a class called .open is added to the dropdown, so with the help of that you can style it.

Just add these code

ul.nav.navbar-nav .dropdown.open .dropdown-toggle{
  color: red;
  background-color: green;
}


.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}
ul.nav.navbar-nav .dropdown.open .dropdown-toggle{
  color: red;
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    <nav class="navbar navbar-default" role="navigation">
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">WOMEN<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">MEN<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Something</a></li>
              <li><a href="#">Another something</a></li>
            </ul>
          </li>          
        </ul>
      </div><!-- /.navbar-collapse -->
    </nav>

Upvotes: 3

Related Questions