Change Font Color of Active Menu Item [Resolved]

43 Posts

chrison600 Reply #1, 17 years, 9 months ago

Hi all,

I’ve got my Wayfinder menu running ok, but I can’t seem to get the class="active" style to adopt the font color I’m trying to pass to it. I’ve tried numerous CSS syntax changes. The page source makes it appear that Wayfinder applies an "active" class to the correct list item.

I’ve searched the forums, the Wayfinder documentaton, and looked at other examples and tutorials online. I’m not sure why I can’t get my menu to adopt the font color change. The link and hover colors work fine... Anyone know what I’m doing wrong??

Here’s the way my source code looks when viewed from the browser:

<div class="headernav">
<ul><li class="active"><a href="http://www.forwardgear.biz/" title="Home" >Home</a></li>
<li><a href="/index.php?id=11" title="Services" >Services</a></li>
<li class="last"><a href="/index.php?id=3" title="About Us" >About Us</a></li>
</ul>
</div><!--Close Header Navigation-->

Here are some of my attempted CSS inserts:

.headernav li:hover a, .headernav li a:hover, .headernav li:active a, .headernav li a:active, .headernav ul li.CSStoHighlight {
color: #C80000;
}

.headernav li.active {
color: #C80000;
}

Thanks,

Chris

4,205 Posts

dev_cw Reply #2, 17 years, 9 months ago

.headernav li.active a {
color: #C80000;
}

Try this. Adding the anchor tag is what makes the diff. wink

I like to more specific and use div#headernav li.active a{} Use an id instead of a class if it is something that will only exist once like a navigation menu and add the div identifier to be as specific as posible.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

43 Posts

chrison600 Reply #3, 17 years, 9 months ago

Sweet!

I had something like this in one of my CSS statements, but the syntax was wrong.

Thanks!

Chris