twitter bootstrap change background color of button with dropdown menu on click

Question

In Twitter Bootstrap 2, I want to be able to change the background color of a button in the navbar but only when the dropdown menu is clicked. I tried changing the CSS and I understood that the class background-color you can change is

    .dropdown-toggle {
     *margin-bottom: -3px;
     background-color: #fffffff;
     }

but that didn't work as it does it statically. I also tried

     .dropdown-toggle:active,
    .open .dropdown-toggle {
    outline: 0;
    background-color: #fffffff;
     }

but that didn't work either (nothing happens).

HTML looks like this:

  <div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="brand" href="#">...</a>
      <!-- nav-collapse indicates what will be in collapsed navigation -->
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
          <li><a href="#about">...</a></li>
          <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">...<b class="caret"></b></a>
    <ul class="dropdown-menu">
          <li><a href="#">...</a></li>
          <li><a href="#">...</a></li>
              </ul>
          </li>
          ...

So I figured it was a JavaScript problem, but I'm not really sure how to do it. Does anyone else know and can help?

http://jsfiddle.net/3xdws/ code is here but it doesn't seem to show the dropdown items for some reason? oh well

Can you put your code in a jsfiddle.net

designtocode
– designtocode

2013-07-28 14:37:16 +00:00
Commented Jul 28, 2013 at 14:37 — designtocode
– designtocode, Commented Jul 28, 2013 at 14:37
done and edited original post

John61590
– John61590

2013-07-28 14:59:13 +00:00
Commented Jul 28, 2013 at 14:59 — John61590
– John61590, Commented Jul 28, 2013 at 14:59

designtocode · Accepted Answer · 2013-07-28 17:25:45Z

5

You need to edit this class .dropdown .open in your css.

So if you wanted the background to change, it will be like this:

.dropdown.open {
    background: #fff;
}

And for the font color change it here:

.dropdown.open .dropdown-toggle {
    color: #000;
}

See the updated fiddle here

answered Jul 28, 2013 at 17:25

designtocode

2,2554 gold badges23 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John61590 Over a year ago

Seems to work yeah. I was thinking about it too hard I guess!

Collectives™ on Stack Overflow

twitter bootstrap change background color of button with dropdown menu on click

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related