How to Style Primary Menu with Active Class

Question

I have been able to style primary menu with hover class, but active class is not working: (www.gehrkeshardwoodflooring.com)

.main-navigation {
    color: #b2a79b !important;
}

.main-navigation a:link {
    color: #b2a79b !important;
}

.main-navigation a:visited {
    color: #b2a79b !important;
}

.main-navigation a:hover {
    color: #4d4d4d !important;
}

.main-navigation, #primary-menu a:active {
    color: #4d4d4d !important;
}

Answer 1

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;
}

Answer 2

You don't have a.active in your code, you have .main-navigation li.current_page_item a

So, this should fix this:

.main-navigation li:hover a { color: #4d4d4d; }
.main-navigation li.current_page_item a { color: #4d4d4d; }

Are you agree?