0

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

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;
}
  • Yes!!! That worked - thank you, Nathan. And I definitely need to learn the difference between those two. Didn't even realize they were two different things. The pseudo class was the only thing I was aware of somehow. I must have been absent that day. Yikes... – SMWalker May 16 '18 at 20:48
1

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?

  • In theory - yes. But it's not working for me. – SMWalker May 16 '18 at 19:51
  • So is .main-navigation, #primary-menu a:active not an active class? – SMWalker May 16 '18 at 19:51
  • It works in custom code, but not in WP theme...? – SMWalker May 16 '18 at 19:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.