Make Navigation Word Two Colors When Active
My client would like to have one link, out of the nine listed in the main navigation menu, to be two colors when it's active.
The word is STREAT and they would like the STR to be the solid gray from the site and the EAT to be a specific blue color.
Is this possible without impacting the other eight navigation items? Those, by the way, when active are all the company's redish color. We are using a Wordpress theme for this site.
Thanks for any help!
Solutions
you can symply use
span
tag in a word and give
css
to a active
li
span
here is the example :
.menu li
{
color:#f00;
}
.menu li.active
{
color:#00f;
}
Here my fiddle, hope i understand your problem correct :
http://jsfiddle.net/YMUAE/
html :
<a href="#">
<span class="color_one">STR</span>
<span class="color_two">EAT</span>
</a>
css :
a {
text-decoration:none;
}
a:active > .color_one {
color:red;
}
a:active > .color_two {
color:blue;
}
.color_two {
margin-left:-5px;
}