I've encountered a small challenge with my header section. Despite multiple attempts, I'm struggling to change the color of the 'current' menu item. It seems that overriding Bootstrap's default color is proving to be more difficult than anticipated. Even after trying various combinations of selectors in my CSS file, nothing has worked so far. What am I missing?
I've also explored solutions from similar questions, but none of them have yielded successful results.
Below is the code snippet in question:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Collins | Welcome</title>
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Pangolin|Ubuntu" rel="stylesheet">
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
font-family: 'Ubuntu', sans-serif;
font-size: 15px;
line-height: 1.5em;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
header {
background-color: #1B1B1B;
padding-top: 30px;
min-height: 70px;
border-bottom: #228B22 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header .logo {
float: left;
}
header .logo h1 {
margin: 0;
margin-top: -11px;
color: #fff;
font-size: 25px;
}
header .highlight, header #current {
color: #228B22;
font-weight: bold;
}
header nav {
float: right;
margin-top: -8px;
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="logo">
<h1><span class="highlight">c/o</span> dev-ign</h1>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li id="current"><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>