I am looking to modify the color of the active page,
Here is the HTML code snippet:
<html>
<head>
<title>John Doe - Portfolio</title>
<link rel="stylesheet" href="custom-style.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" / media="screen" type="text/css" title="Design" href="design.css">
</head>
<script>
$(function() {
$('#mainnav li a').click(function() {
$('#mainnav li').removeClass();
$($(this).attr('href')).addClass('active');
});
});
</script>
<body>
<div id="nav-bar" class="nav-bar">
<img src="Img/example.png"></img>
<ul class="mainnav" id="mainnav">
<li><a href="portfolio.php">PORTFOLIO</a></li>
<li><a href="about_me.php">ABOUT ME</a></li>
<li><a href="contact.php">CONTACT</a></li>
</ul>
</div>
</body>
</html>
CSS Code:
#nav-bar {
height:100%;
width: 20%;
color: #070707;
background-color: #efefef;
font-size: 14px;
box-shadow: -6px 0px 10px rgba(0, 0, 0, 0.5);
}
#nav-bar img {
margin-left: 10%;
margin-bottom: 10px;
margin-top: 20px;
vertical-align: middle;
}
#nav-bar a {
text-decoration: none;
color: #070707;
}
#nav-bar a:active {
color: red;
}
#mainnav > .active > a {
color: red;
}
#nav-bar ul.mainnav {
list-style-type: none;
margin: 0;
margin-bottom: 100px;
padding: 0;
}
#nav-bar ul.mainnav li {
padding-top: 10px;
margin-left: 20px;
margin-right: 20px;
padding-bottom: 10px;
padding-left: 10px;
border-bottom: 1px dashed #070707;
}
For instance, I want the background color of the active navigation item to be #4B77BE ... any suggestions? Maybe a JavaScript trick or just CSS?
Thank you!