CSS Dynamic Menu

Hello,

I have looked through Forums and tutorials about this issue. I think that half my issue is not knowing how to ask the question. I am looking to create a horizontal menu, I am using Wayfinder, that when I click on a menu item it will stay a designated color that I can specify indicating that it is on the page link that was clicked.

Thanks for any direction on what I am looking for, as I have spent days poring my self over forums and tutorials looking for the answer.

thanks

Wayfinder adds an active class to the current link that was clicked on so you just need to add your styles to this class.

Wayfinder also adds a first and last class to the items on the list, you can find explanation and examples on how to use wayfinder here

could you give me an example of adding the css to the wayfinder?

Wayfinder already adds these classes by default you need to style these classes in your css file.

This is what I am using...
I am using the evolution 1.5

CSS Code

.underlinemenu{
font-weight: normal;
width: 822px;
margin-left:225px;
font-family: "Comic Sans MS", cursive;
font-size: 22px;
color: #FFF;
text-decoration: none;
padding-bottom: 30px;
}

.underlinemenu ul{
/*padding: 4px 0 4px 0; 6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/
margin: 0;
text-align: left;
}

.underlinemenu ul li{
display: inline;
}

.underlinemenu ul li a{
color: #fff; /*top padding is 6px, bottom padding is 4px*/
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none; /*margin-bottom: 10px;
padding-top: 6px;
padding-right: 3px;
padding-bottom: 4px;
padding-left: 3px;border-bottom: 3px solid gray;*/ /*bottom border is 3px*/
}


.underlinemenu ul li a:hover, .underlinemenu ul li a.active{
font-family: "Comic Sans MS", cursive;
font-size: 22px;
color: #314381;
text-decoration: none;

}

I am using the stock wayfinder set up that came with the Evolution.

This is my base body structure:
<div id="header"></div>
<div id="menu">
<div class="underlinemenu" >[[Wayfinder? startId=`0` ]]
</div>
</div>
<div id="horzBelowMenu"></div>
<div id="logoSecond"></div>

I usually do a "View Source" on a page with the menu and see what classes Wayfinder is using. Often, it's enough to just use those.

Hello bob,

Here is the output of the page (source). I see the active class working, but the color of the link is not highlighting the menu text grey....

<div id="header"></div>
<div id="menu">
<div class="underlinemenu" ><ul><li><a href="http://theministry.org/" title="Home" >Home</a></li>
<li><a href="/the-ministry.html" title="Teachings" >Teachings</a></li>
<li class="last active"><a href="/contact-us.html" title="Contact Information" >Contact us</a></li>
</ul>
</div>
</div>
<div id="horzBelowMenu"></div>
<div id="logoSecond"></div>

You could try this:



Also, look at the order of loading of the CSS files in the source and make sure that there isn't one that loads after yours that sets that value.

FireBug should tell you what rule is active for that element and what file the rule is in. If you give us a URL, we might be able to suggest something.

The Web Address is: http://theministry.org/