Bootstrap dropdown button rotates halfway when clicked?
Thanks for this stupid question, I created a sign in the dropdown menu in the navbar (navbar-inverse), but it becomes bold when the button is clicked. I didn't customize the button and it's a simple plain red hazard button. I searched for the reason, but nothing seems to work. So please help me.
<div class="navbar navbar-inverse" style="margin-bottom:0px">
<div class="navbar-inner">
<ul class="nav pull-right" style="margin-top:3px">
<li class="active span2"><a href="#">HOME</a></li>
<li><a href="#" class="span2">ABOUT</a></li>
<li><a href="#" class="span2">PRICING</a></li>
<li><a href="#" class="span2">CONTACT</a></li>
<li class="dropdown">
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#">SIGN IN</button>
<ul class="dropdown-menu" style="margin-right:25px;margin-top:10px;width:230px">
<form align="center" style="text-align:center">
<div class="input-prepend">
<span class="add-on" style="margin-top:10px"><i class="icon-user icon-black"></i></span>
<input type="text" style="width:140px;margin-top:10px"/>
</div>
<input type="text" style="width:170px"/>
</form>
</ul>
</li>
</ul>
</div>
</div>
+3
source to share
1 answer
The problem is related to the .navbar-inverse .nav li.dropdown.open
and classes .navbar .nav li.dropdown.open
.
Please use the following classes in your custom stylesheet, changing background-color
to your choice.
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle, .navbar-inverse .nav li.dropdown.active > .dropdown-toggle, .navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
background-color:#BD362F;
color: #FFFFFF;
}
.navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle {
background-color:#BD362F;
color: #555555;
}
jsfiddle for you Jsfiddle with dropdown
+2
source to share