Hello everyone, I've been struggling to find a solution to my issue and I could really use some help.
The problem I'm facing is changing the text color of the active button in Bootstrap. Specifically, after clicking on a button, I want it to transition from white to a green hue, but I can't seem to change that color. Any suggestions on how I can achieve this?
I attempted the following CSS code:
.button:focus, .button.active, .button.active:focus {
color: white !important;
}
Unfortunately, this approach did not yield the desired result.
(Also, if anyone knows how to input code without triggering "run code" but still have proper color formatting, please share with me.)
Below is the code snippet:
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%;
}