Title: Custom Current Item
Last modified: August 30, 2016

---

# Custom Current Item

 *  [SolidSnake2003](https://wordpress.org/support/users/solidsnake2003/)
 * (@solidsnake2003)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/custom-current-item-1/)
 * Is there a way to change the current item classes in a theme to a custom one
 * Example
 * home for the regular
 * home_current for the current

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [Bojan Radonic – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support4/)
 * (@wpmudev-support4)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/custom-current-item-1/#post-6737721)
 * 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
 *  Thread Starter [SolidSnake2003](https://wordpress.org/support/users/solidsnake2003/)
 * (@solidsnake2003)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/custom-current-item-1/#post-6737725)
 * 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="http://www.haley-osment.net/" target="_blank"><div class="home_current">Home</div></a></li>
       <li><a href="http://www.haley-osment.net/haley" target="_blank"><div class="haley">Haley</div></a></li>
       <li><a href="http://www.haley-osment.net/news" target="_blank"><div class="news">News</div></a></li>
       <li><a href="http://www.haley-osment.net/features" target="_blank"><div class="features">Features</div></a></li>
       <li><a href="http://www.haley-osment.net/art" target="_blank"><div class="art">Fan-Art</div></a></li>
       <li><a href="http://www.haley-osment.net/photos" target="_blank"><div class="photos">Photos</div></a></li>
       <li><a href="http://videos.haley-osment.net/" target="_blank"><div class="videos">Videos</div></a></li>
       <li><a href="http://www.haley-osment.net/press" target="_blank"><div class="press">Press</div></a></li>
       <li><a href="http://www.haley-osment.net/www" target="_blank"><div class="www">WWW</div></a></li>
       <li><a href="http://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;
       }
       ```
   
 *  [Bojan Radonic – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support4/)
 * (@wpmudev-support4)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/custom-current-item-1/#post-6737730)
 * 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

Viewing 3 replies - 1 through 3 (of 3 total)

 The topic ‘Custom Current Item’ is closed to new replies.

 * 3 replies
 * 2 participants
 * Last reply from: [Bojan Radonic – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support4/)
 * Last activity: [10 years, 11 months ago](https://wordpress.org/support/topic/custom-current-item-1/#post-6737730)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics