0

Having 2 problems with nav bar

1) I can't change text color. Tried diff hex values, didn't work.... How do I change text color?

2) I want nav menu items to change to italic when on hover AND on active state (so for example, when i'm on about page, "about" is italic.

I tried this: 

#nav li a:hover {
font-style: italic;
}

#nav li a:active {
font-style: italic;
}

but ^ doesn't do anything.

When I try the following: 

a:hover, a:active { 
font-style: italic;

}

Text does become italic on hover, BUT not on active state. Also, I only want to apply this italic on hover/active state effect only to nav bar items, not to other links, so this won't work either.

Would appreciate your help!! 

.nav {
height:         58px;
margin:         0;
margin-left:    0px;
width:          100%;

}

.nav ul {
position:       absolute;
right:          0px;
height:         0px;
display:        block;
font-family:    "Adobe Garamond Pro"; 
list-style:     none;
margin:         0;
padding:        21px 40px;
color: #A6A6A6 !important; 
} 

.nav li {
font-size:  19px;
float:      left;
color: #A6A6A6 !important; 
margin-left:40px;
font-family:    "Adobe Garamond Pro"; 
width: 58px;
}

#nav li a:hover {
font-style: italic;
}

#nav li a:active {
font-style: italic;
}

Also html 

<ul>
<li class="nav-work"><a href="/">Work</a></li>
<li class="nav-about"><a href="/about.html">About</a></li>
<li class="nav-contact"><a href="/contact.html">Contact</a></li>
</ul>
user2277916
  • 103
  • 1
  • 4
  • 13

2 Answers2

1

For the text color, you can't target the li, the anchor's color will override it. Try it like this: 

.nav li a { color: #A6A6A6; }

For the active state, 'active' won't work there. Active styles only apply while an element is being clicked. You have to either custom code the pages so that their nav styles line up with the proper pages or you could

EDIT: I did not properly understand the 'active' state issue. After re-reading, I would like to redirect you to this topic which I feel has the solution to that issue.

Community
  • 1
  • 1
DawnPatrol
  • 156
  • 8
0

You should add a class to let css know which menu item is active. It can be done using jQuery

Here's the jQuery you can use:

$(document).ready(function(){
  $('ul li a').click(function(){
    $('li a').removeClass("active");
    $(this).addClass("active");
});
});

And add this to change color of an active menu item:

li.active a {
color: #ff0000;
}

Here's the complete working example:

$(document).ready(function(){
  $('ul li a').click(function(){
    $('li a').removeClass("active");
    $(this).addClass("active");
});
});
ul {
position:       absolute;
right:          0px;
height:         0px;
display:        block;
font-family:    "Adobe Garamond Pro"; 
list-style:     none;
margin:         0;
padding:        21px 40px;
color: #A6A6A6 !important; 
} 

 li {
font-size:  19px;
float:      left;
color: #A6A6A6 !important; 
margin-left:40px;
font-family:    "Adobe Garamond Pro"; 
width: 58px;
}

li a:hover {
font-style: italic;
}

li.active a {
font-style: italic !important;
background: #e1e1e1;
padding:10px 15px;
color: #ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="nav-work active"><a href="/">Work</a></li>
<li class="nav-about"><a href="/about.html">About</a></li>
<li class="nav-contact"><a href="/contact.html">Contact</a></li>
</ul>
Rahul
  • 493
  • 6
  • 27