There is a class "dropdown-menu" in twitter bootstrap eg.<ul class="dropdown-submenu">.
As you observe there is an arrow right to it.How to set the color of arrow to dark when hovered?
Add a comment
|
2 Answers
You can do it in the following way :
For Dropdown-menu onhover color change:
.navbar .nav li.dropdown > a:hover .caret, .navbar .nav li.dropdown > a:focus .caret {
border-bottom-color: red;/*change color to your liking*/
border-top-color: red;/*change color to your liking*/
}
Change color of caret when active(Dropdown menu) :
.navbar .nav li.dropdown.open > .dropdown-toggle .caret, .navbar .nav li.dropdown.active > .dropdown-toggle .caret, .navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
border-bottom-color: #008745;/*change color*/
border-top-color: #008745;/*change color*/
}
For Dropdown Sub menu
.dropdown-submenu > a:after {
border-color: transparent transparent transparent #000000;/*change here */
border-style: solid;
border-width: 5px 0 5px 5px;
content: " ";
display: block;
float: right;
height: 0;
margin-right: -10px;
margin-top: 5px;
width: 0;
}
Dropdown submenu onHover color change :
.dropdown-submenu:hover > a:after{
border-left-color:#fff; /* change the color to anything of your choice*/
}
The default color of caret is set here and can be changed where mentioned below:
.caret {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #FFFFFF; /* change the color to anything of ur liking */
content: "";
display: inline-block;
height: 0;
vertical-align: top;
width: 0;
}
4 Comments
Sahil Popli
he is asking for change icon color in bootstrap that use a image for icons
Shail
I know Sahil what he is asking for ... caret color can be set the way I have mentioned .
user2058595
thank you for giving suggestion @SahilPopli.. I really appreciate your effort.,
Shail
@user2058595 did ya check the answer
just switch over the glyphicons image?
.dropdown-submenu:hover{
i{
background-image: url("../images/bootstrap/glyphicons-halflings-white.png");
}
just download colored icon image file from google or glyphicons or change yourself in photoshop
1 Comment
Shail
He is not asking to change any glyphicons neither he mentioned about it . Just a color change .. check my solution