I know this question has been asked so many times before. But I just can't find the right trick for my code. I want a different color for my active list item in the navigation bar. Obviously. Silly little thing. I know. But please try to help.
Here's my HTML code:
<div id="container">
<ul id="nav">
<li class="active"><a href="am_home.html">Home</a></li>
<li><a href="am_teachingassistants.php">Teaching Assistants</a></li>
<li><a href="am_courseinfo.php">Course Info</a></li>
<li><a href="am_timetable.php">Time Table</a></li>
</ul>
</div>
and Here's the CSS file:
#container {
position: relative;
top: -2em;
z-index: 2;
width: 1200px;
margin: auto auto;
}
#nav {
position: relative;
float: left;
margin-left: 400px;
}
#nav li {
list-style: none;
float: left;
border-right: 1px solid #afc4cc;
}
#nav li a {
position: relative;
z-index: 2;
float: left;
padding: 5px 45px;
font-size: 15px;
font-weight: bold;
font-family: helvetica, arial, sans-serif;
text-decoration: none;
color: #39aea8;
}
ul, li {
margin: 0;
padding: 0;
}
ul#nav li a:link,ul#nav li a:visited {
color: #39aea8;
text-decoration: none;
}
ul#nav li a:hover,ul#nav li a:active {
color: #f4ba51;
text-decoration: none;
}
You can turn the element into a button. remove default styling from a button: online: none; border: none; background: none; then apply the usual button :focus or :active selectors.
Simply add the appropriate CSS selector and define the color property with the value you want. For example, say you want to change the color of all paragraphs on your site to navy. Then you'd add p {color: #000080; } to the head section of your HTML file.
There are two ways to change the color of the bullet:Using an extra markup tag. Using Css style ::before selector.
There's something wrong with your CSS code. Just replace this:
ul#nav li a:hover,ul#nav li a:active{
}
with this:
ul#nav li a:hover,ul#nav li.active a{
// here styling
}
and you are good to go. You just made a mistake while calling the active class in CSS.
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