Custom Current Item

Hey there SolidSnake2003,

How are you doing today?

If you’re looking to have different style for different menu links while they are active you should be able to do this with just CSS and not changing the adding custom classes at all as each menu item has it’s own unique class/id you can target their active state separately and apply different styles.

Depending on the theme something like this should work:

li#menu-item-223.current-menu-item a {
    color: blue;
}

Hope this makes sense ??

Cheers,
Bojan

I tried it, but it doesn’t work. I’m using buttons instead of text

the HTML for my nav is like this

<!-- Begin Main Navigation -->
<div class="main-nav">
<ul>
<li><a href="https://www.haley-osment.net/" target="_blank"><div class="home_current">Home</div></a></li>
<li><a href="https://www.haley-osment.net/haley" target="_blank"><div class="haley">Haley</div></a></li>
<li><a href="https://www.haley-osment.net/news" target="_blank"><div class="news">News</div></a></li>
<li><a href="https://www.haley-osment.net/features" target="_blank"><div class="features">Features</div></a></li>
<li><a href="https://www.haley-osment.net/art" target="_blank"><div class="art">Fan-Art</div></a></li>
<li><a href="https://www.haley-osment.net/photos" target="_blank"><div class="photos">Photos</div></a></li>
<li><a href="https://videos.haley-osment.net/" target="_blank"><div class="videos">Videos</div></a></li>
<li><a href="https://www.haley-osment.net/press" target="_blank"><div class="press">Press</div></a></li>
<li><a href="https://www.haley-osment.net/www" target="_blank"><div class="www">WWW</div></a></li>
<li><a href="https://www.haley-osment.net/website" target="_blank"><div class="site">Website</div></a></li></ul></div><!-- End Main Navigation -->

here is the css

.main-nav, .main-nav ul {
	width: 1040px;
	height: 40px;
	font-size: 12px;
	line-height: 40px;
	font-family: Arial, sans-serif;
	color: #b85f31;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	letter-spacing: 0px;
	text-transform: uppercase;
}

.main-nav li {
	display: inline-block;
	float: left;
}

.main-nav .home {
	width: 104px;
	height: 40px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-indent: -9000px;
}

.main-nav a .home {
	width: 104px;
	height: 40px;
	color: #c3995b;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: #3c2608;
	background-image: url('../images/layout/whole/buttons/main-nav/buttons_main-nav_01-home.jpg');
	background-repeat: no-repeat;
	-webkit-transition: all 0.7s ease;
	-moz-transition: all 0.7s ease;
	-o-transition: all 0.7s ease;
}

.main-nav a:hover .home {
	width: 104px;
	height: 40px;
	color: #97784c;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: #794d10;
	background-image: url('../images/layout/whole/buttons/main-nav/buttons_main-nav_01-home_hover.jpg');
	background-repeat: no-repeat;
	-webkit-transition: all 0.7s ease;
	-moz-transition: all 0.7s ease;
	-o-transition: all 0.7s ease;
}

.main-nav .home_current {
	width: 104px;
	height: 40px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-indent: -9000px;
}

.main-nav a .home_current {
	width: 104px;
	height: 40px;
	color: #e9ba74;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: transparent;
	background-image: url('../images/layout/whole/buttons/main-nav/buttons_main-nav_01-home_current.jpg');
	background-repeat: no-repeat;
	-webkit-transition: all 0.7s ease;
	-moz-transition: all 0.7s ease;
	-o-transition: all 0.7s ease;
}

.main-nav a:hover .home_current {
	width: 104px;
	height: 40px;
	color: #b98234;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: transparent;
	background-image: url('../images/layout/whole/buttons/main-nav/buttons_main-nav_01-home_current_hover.jpg');
	background-repeat: no-repeat;
	-webkit-transition: all 0.7s ease;
	-moz-transition: all 0.7s ease;
	-o-transition: all 0.7s ease;
}

Hey again SolidSnake2003,

Can you please post link to your site instead, it would be much easier for me to check if there is something we can do about that rather then seeing HTML and CSS here.

Cheers,
Bojan