It looks like you might be confusing the :active
CSS pseudo class and an actual .active
class. The pseudo class represents an element that is being activated by the user. It is not the active page.
If you want to use the active
class on the current page, you can use the nav_menu_css_class
filter to add to the nav menu classes.
function wpse_nav_menu_css_class( array $classes, $item, $args, $depth ) {
if( in_array( 'current-menu-item', $classes ) ) {
$classes[] = 'active';
}
return $classes;
}
add_filter( 'nav_menu_css_class', 'wpse_nav_menu_css_class', 10, 4 );
Then, to style the active class,
.main-navigation, #primary-menu .active a {
color: #4d4d4d !important;
}
Otherwise, you can use the current-menu-item
class instead. (Note the hyphens and not underscores)
.main-navigation, #primary-menu .current-menu-item a {
color: #4d4d4d !important;
}