Active Class for WordPress

If WordPress Theme doesn’t support ability indicate the current page, you can add script to your functions.php and use the .active CSS Class to style the current navigation item.

Add to functions.php:

/*
* Active Class Menu
*/
add_filter(‘nav_menu_css_class’ , ‘special_nav_class’ , 10 , 2);
function special_nav_class($classes, $item){
if( in_array(‘current-menu-item’, $classes) ){
$classes[] = ‘active ‘;
}
return $classes;
}

Sample CSS for .active:

#nav-main ul.sf-menu .active {
font-weight: 400;
border-style: solid;
    border-width: 1px;
color: #01a64f;
}

Leave a Reply