I want my active link to appear red:
nav class="navbar navbar-inverse">
<div class="container col-1 col-sm-12">
<ul class="nav">
<li class="<%= 'active' if current_page?(squad_path) %>"><%= link_to("squad", squad_path)%></li>
<li class=" <%= 'active' if current_page?(album_path) %>"><%= link_to("album", album_path)%></li>
...
Upon inspecting the page, I can see that the li tag is marked as active but doesn't change color on the actual site. However, the hover effect works correctly and changes the color.
This is the CSS code being used:
.nav li a{
display: inline-block;
padding-right: 8px;
padding-left: 8px;
color: #fff;
margin-bottom: 3px;
margin-top: 3px;
font-size: 40px;
font-family: "Germanica";
}
.nav li a:hover{
text-decoration: none;
color: #ff0000;
background-color: black;
}
.nav li .active a {
color: #ff0000 !important;
}
Although changing the background color works fine, the text color does not change when attempting to adjust it.