Bootstrap-CSS dropdown menu button styling

Question

All the styles work perfectly except for when I click anywhere (including on the button) to exit the dropdown menu - the second click. In this instance the background becomes the default blue. However, when I click on the button to initially to open the dropdown menu, my .buttonMenu:active styles work as they should. How can I style the second click that exits the menu?

HTML:

<div class="dropdown">
    <button style="float:right;" class="btn btn-primary dropdown-toggle buttonMenu" type="button" data-toggle="dropdown"><?php echo "$userFullName"; ?></button>
        <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#">Profile</a></li>
            <li><a href="#">Settings</a></li>
            <li><a href="logout.php">Sign out</a></li>
        </ul>
</div>

CSS:

.buttonMenu{
background: none;
border: none;
display: inline-block;
font-family: 'Ubuntu', sans-serif;
font-weight:400;
font-size: 1.3em;
font-style: italic;
color:#F5F5F5;
text-align: right;
margin-top:4.8%;
margin-right:2%;
}

.buttonMenu:hover {
background-color: #AE4936 !important;
border: none !important;
outline: none !important;
}

.buttonMenu:active {
background-color: #AE4936 !important;
outline: none !important;
border: none !important;
}

.buttonMenu:focus {
background-color: #AE4936 !important;
outline: none !important;
border: none !important;
}

Your question is too vague.. What exactly should happen to the button's style? — elad.chen
– elad.chen, Commented Aug 27, 2015 at 16:47
I don't see any problem with your code, you may need to update your bootstrap css files or you may have a conflict with other css classes. — bcngr
– bcngr, Commented Aug 27, 2015 at 16:53
@elad.chen vague? I stated the problem is on the second click (to close the menu) the background goes to default blue. What should happen is what I have in my css code. — t_soist
– t_soist, Commented Aug 27, 2015 at 17:07
@CarlosBocanegra No there is a valid issue. I have too observed it. And implemented the correction. See my answer — Ankit Agarwal
– Ankit Agarwal, Commented Aug 27, 2015 at 17:11

Ankit Agarwal · Accepted Answer · 2015-08-27 17:10:05Z

2

You have to add custom styles for open state of dropdown button as follows

.open>.dropdown-toggle.buttonMenu{
     background-color: #AE4936 !important;
     outline: none !important;
     border: none !important;
}

Watch your implemented code here

answered Aug 27, 2015 at 17:10

Ankit Agarwal

1,35810 silver badges15 bronze badges

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

1 Comment

t_soist Over a year ago

Perfect. Thanks for the help.

Collectives™ on Stack Overflow

Bootstrap-CSS dropdown menu button styling

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related