One major challenge I face when using CSS libraries is their tendency to overwrite my custom styles. For instance, I have a list within a Bootstrap expand/collapse menu like this:
<ul class="nav navbar-nav">
<li>
<a href="#" style=""><img src="images/arrow.gif" style="width: 20px;">Link A</a>
</li>
</ul>
To set my own font color, I apply the following CSS:
nav li {
font-size: 16px;
color: #004687;
}
However, upon inspecting in Firefox's Inspector, I notice that Bootstrap is overriding the color I've chosen.
It's worth noting that my custom CSS comes after loading the Bootstrap files in the HTML document head section.
Is there a way to prevent this without having to individually add style="color: #004687" to each element?
UPDATE: Despite the suggestions provided so far, none have yielded any success. To offer more context, I'm sharing the complete original code below:
<div class="container">
<header class="navbar navbar-static-top bs-docs-nav">
<div class="col-md-4 visible-xs" id="mobile-nav-outer">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="../" class="navbar-brand">Menu</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" id="mobile-nav-inner" role="navigation">
<ul class="nav navbar-nav">
<li>
<a href="#" class="nav-mobile-link"><img src="images/arrow.gif" style="width: 20px;">Link A</a>
</li>
</ul>
</nav>
</div>
</header>
</div>
The inclusion of my CSS looks like this:
<head>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/docs.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<style type="text/css">
#mobile-nav-outer {
border: 1px solid #CCC;
background-color: #FFF;
}
#mobile-nav-inner {
border: 1px solid #CCC;
background-color: #FFF;
margin: 3px;
}
nav li {
font-size: 16px;
color: #004687;
}
.nav-mobile-link {
font-size: 16px;
color: #004687;
}
</style>
</head>
UPDATE 3: After some experimentation, I discovered a workaround by utilizing IDs instead of classes, as ID selectors take precedence over class selectors due to CSS specificity. While effective, this approach isn't ideal, and I still seek insights into why my attempts to override Bootstrap classes with my own have been unsuccessful.