Menu
Sorry to bother you guys again... I've looked everywhere for the answer to this, but I still can't seem to figure it out.
I need to change the text color of the active button in Bootstrap. Basically when you click on one of the buttons it will go from being white to some sort of green color, and I want to change that color. Does anyone have any ideas on how I can do this?
I've tried this in CSS:
.button:focus, .button.active, .button.active:focus {
color: white !important;
}
However, that didn't work.
(And can someone tell me how I can just put code in without the "run code" but it still colors it properly?)
Here's my code:
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/darkly/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/darkly/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<html lang="en">
<div class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="dropdowns">
<a class="navbar-brand" id="brand">Traders: </a>
<li class="dropdown">
<a class="dropdown-toggle" aria-expanded="false">General <span class="caret"></span></a>
<ul class="dropdown-menu pull-left" role="menu">
<li><a href="#medical">Medical</a></li>
<li><a href="#utility">Utility</a></li>
<li><a href="#supplies">Supplies</a></li>
<li><a href="#banker">Banker</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" aria-expanded="false">Vehicles <span class="caret"></span></a>
<ul class="dropdown-menu pull-left" role="menu">
<li><a href="#aircraft">Aircraft </a></li>
<li><a href="#vehicle">Vehicle </a></li>
</ul>
</li>
<li class="button"><a href="#blackmarket">Black Market</a></li>
<li class="button"><a href="#wholesaler">Wholesaler</a></li>
<li class="button"><a href="#hero">Hero</a></li>
<li class="button"><a href="#bandit">Bandit</a></li>
</ul>
</div>
</div>
<body></body>
</html>CSS:
@media {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
.navbar-custom {
color: #262626;
background-color: #262626;
}
.button:hover a{
color: white !important;
}
.navbar-default {
color: #262626;
background-color: #262626;
border-top: 4px solid red;
}
.navbar-default .navbar-brand:hover {
color: white;
}
.dropdown:hover a{
color: white !important;
}
.dropdown-menu > li > a:hover {
background-color: #3d3d3d;
}
}
body {
background-color: black;
}
#navbar {
width: 100%;
}
496
CSS has different pseudo selector by which you can achieve such effect. In your case you can use
:active : if you want background color only when the button is clicked and don't want to persist.
:focus: if you want background color untill the focus is on the button.
http://jsfiddle.net/zakCa/1017/
.button:focus
{
font-size: 13px;
color:orange;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
